我正在寻找一种突出显示md-table中整行的好方法。 我应该做指令还是什么？ 有人可以帮我这个吗？
<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>
更新材料版本更新（md - > mat）：
HTML：
<!-- Add the highlight class in row definiton of md-table -->
<!-- Add click event to pass the selected row index -->
<mat-row *cdkRowDef="let row; columns: displayedColumns;"
[ngClass]="{'highlight': selectedRowIndex == row.id}"
(click)="highlight(row)">
</mat-row>
原答案：
你可以使用ngClass和像selectedRowIndex这样的旗帜来做到这一点。每当点击行索引等于selectedRowIndex时，将应用该类。
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;
}
在table overview examples页面中，他们解释了SelectionModel处理选择 - 顺便提一下也处理多选。
selection是组件中定义的SelectionModel。我找不到任何实际的文档，但implementation非常简单。
selection = new SelectionModel<CustomerSearchResult>(false, null);
第一个参数是allowMultiSelect，因此要允许一次选择多个项目，请将其设置为true。如果为false，则选择模型将在您设置新值时取消选择任何现有值。
然后向select()行添加一个click事件，并在选择行时创建自己的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能够在这样的常见情况下得到改进，而且他们不会把所有事情都留给开发人员。关于选择模型，自动处理键盘事件等事情会很好。
我的表数据中没有像id列这样的唯一标识符，但这对我有用（材料6）：
HTML
<tr mat-row *matRowDef="let row; columns: displayedColumns"
(click)="selectedRow = row" [ngClass]="{ 'selected': row === selectedRow }">
</tr>
将变量添加到TS
selectedRow;
（S）CSS
.selected {
background-color: red;
}
如果你想在选择行时做更多的事情而不仅仅是样式，用(click)="selectedRow = row"替换(click)="selectRow(row)"并将此函数添加到你的ts：
selectRow(row) {
this.selectedRow = row;
// more stuff to do...
}
所以，我也遇到了这个问题。我正在使用较新的'mat-'而不是'md-'，但我认为它将大致相同......
<mat-row
*matRowDef="let row; columns: myColumns; let entry"
[ngClass]="{ 'my-class': entry.someVal }">
</mat-row>
我没有在任何地方找到它，我只是尝试了它，它碰巧运作了，所以我希望这是正确的。最重要的是将“let entry”标记为其他matRowDef内容的末尾。对不起，我来晚了。希望这对某人有益。
对于材料“：”^ 7.0.3“，
使用html中的css名称（不带单引号）来突出显示该行
.mat-row.highlighted {
background: lightblue;
}
<tr mat-row *matRowDef="let row; columns: displayedColumn;"
[ngClass]="{highlighted: selectedRowIndex == row.id}" (click)="highlight(row)" >
</tr>
highlight(row){
this.selectedRowIndex = row.id;
}