Angular 4材料表突出显示一行

Question

我正在寻找一种很好的方法来高亮显示md表中的整行。
我应该做指令还是什么？
任何人都可以帮助我吗？

<div class="example-container mat-elevation-z8"> 
    <md-table #table [dataSource]="dataSource"> 

    <!--- Note that these columns can be defined in any order. 
      The actual rendered columns are set as a property on the row definition" --> 

    <!-- ID Column --> 
    <ng-container cdkColumnDef="userId"> 
     <md-header-cell *cdkHeaderCellDef> ID </md-header-cell> 
     <md-cell *cdkCellDef="let row"> {{row.id}} </md-cell> 
    </ng-container> 

    <!-- Progress Column --> 
    <ng-container cdkColumnDef="progress"> 
     <md-header-cell *cdkHeaderCellDef> Progress </md-header-cell> 
     <md-cell *cdkCellDef="let row"> {{row.progress}}% </md-cell> 
    </ng-container> 

    <!-- Name Column --> 
    <ng-container cdkColumnDef="userName"> 
     <md-header-cell *cdkHeaderCellDef> Name </md-header-cell> 
     <md-cell *cdkCellDef="let row"> {{row.name}} </md-cell> 
    </ng-container> 

    <!-- Color Column --> 
    <ng-container cdkColumnDef="color"> 
     <md-header-cell *cdkHeaderCellDef>Color</md-header-cell> 
     <md-cell *cdkCellDef="let row" [style.color]="row.color"> {{row.color}} </md-cell> 
    </ng-container> 

    <md-header-row *cdkHeaderRowDef="displayedColumns"></md-header-row> 
    <md-row *cdkRowDef="let row; columns: displayedColumns;"></md-row> 
    </md-table> 
</div> 

表来源：https://material.angular.io/components/table/overview

Answer 1

您可以通过使用ngClass和像selectedRowIndex标志做到这一点。无论何时点击行索引等于selectedRowIndex，该类将被应用。

Plunker demo

HTML：

<!-- Add the highlight class in row definiton of md-table --> 
<!-- Add click event to pass the selected row index --> 

<md-row *cdkRowDef="let row; columns: displayedColumns;" 
     [ngClass]="{'highlight': selectedRowIndex == row.id}" 
     (click)="highlight(row)"> 
</md-row> 

CSS：

.highlight{ 
    background: #42A948; /* green */ 
} 

TS：

selectedRowIndex: number = -1; 

highlight(row){ 
    this.selectedRowIndex = row.id; 
} 

Answer 2

所以，我就遇到了这个问题为好。我使用的是较新的“mat-”而不是“MD-”，但我猜这将是差不多的...

<mat-row 
    *matRowDef="let row; columns: myColumns; let entry" 
    [ngClass]="{ 'my-class': entry.someVal }"> 
</mat-row> 

我没有找到任何地方，我刚才试了一下它碰巧出现了，所以我希望这是正确的。最重要的事情是标记'让进入'到其他matRowDef东西的末尾。对不起，我很晚参加派对。希望这可以让一些人变得更好。

Answer 3

在table overview examples页面中，他们解释了处理选择的SelectionModel - 顺便也处理多选。我想，未来的改进将会融入到未来的改进中，所以现在开始使用它是个好主意。

selection是在您的组件中定义的SelectionModel。我找不到任何实际的文件，但implementation是非常简单的。

selection = new SelectionModel<CustomerSearchResult>(false, null); 

第一个参数是allowMultiSelect，因此允许一次选择多个项目将其设置为true。如果设置为false，则选择模型将在您设置新值时取消选择任何现有值。

然后添加一个点击事件到select()该行，并创建自己的CSS类，当该行被选中。

<mat-table> 
     ... 

     <mat-row *matRowDef="let row; columns: displayedColumns;" 
       [ngClass]="{ 'selected': selection.isSelected(row)}" 
       (click)="selection.select(row)"></mat-row> 

    </mat-table> 

的CSS类我加低于（样品中没有提到的造型还），然后你只需要添加到你的CSS

.mat-row { 
    min-height: 65px; 

    &.selected { 
     background: #dddddd; 
    } 
} 

如果你的背景颜色太暗你”你需要自己添加样式来反转文本颜色。

要处理选择，请使用onChange事件selection。

// selection changed 
    this.selection.onChange.subscribe((a) => 
    { 
     if (a.added[0]) // will be undefined if no selection 
     { 
      alert('You selected ' + a.added[0].fullName); 
     } 
    }); 

或者选择的项目在this.selection.selected。

我希望mat-table得到改善，像这样的常见情况下，他们不只是把一切留给开发者。像键盘事件等事情会很好自动处理相对于选择模型。

---

提示：请注意，如果您创建了selectionModel的非多选收集与

selection = new SelectionModel<CustomerSearchResult>(false, []); 

然后selection.selected.length实际上是1个，而不是预期的0项。没有检查，看到传入的项目实际上是在模型中 - 这是一个非常非常愚蠢的类。所以它会盲目地将[0]作为选定的项目。改为使用null。源代码清楚会出现这种情况：

if (_isMulti) { 
    initiallySelectedValues.forEach(value => this._markSelected(value)); 
    } else { 
    this._markSelected(initiallySelectedValues[0]); 
    }