如何根据负载的特定条件突出显示材料数据表中的列

Question

在角度材料数据表中，我想根据加载时的某些列值突出显示一些行。例如在下面的组件中

@Component({
 selector: 'table-basic-example',
 styleUrls: ['table-basic-example.css'],
 templateUrl: 'table-basic-example.html',
})
export class TableBasicExample {  
 selectedRowIndex: number = -1;
 displayedColumns = ['position', 'name'];
 dataSource = new MatTableDataSource<Element>(ELEMENT_DATA);

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

export interface Element {
 name: string;
 position: number;     
 }

const ELEMENT_DATA: Element[] = [
 {position: 1, name: 'Hydrogen' },
 {position: 2, name: 'Helium'  },
 {position: 3, name: 'Lithium'}
 ];

html 模板看起来像

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

<!-- Position Column -->
<ng-container matColumnDef="position">
  <mat-header-cell *matHeaderCellDef> No. </mat-header-cell>
  <mat-cell *matCellDef="let element"> {{element.position}} </mat-cell>
</ng-container>

<!-- Name Column -->
<ng-container matColumnDef="name">
  <mat-header-cell *matHeaderCellDef> Name </mat-header-cell>
  <mat-cell *matCellDef="let element"> {{element.name}} </mat-cell>
</ng-container>

<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
  <mat-row *matRowDef="let row; columns: displayedColumns;"  
  [ngClass]="{'highlight': selectedRowIndex == row.id}" 
    (click)="highlight(row)"></mat-row>
  </mat-table>
  </mat-table>
</div>

我可以在点击时突出显示一行，但我们如何根据条件在加载时进行操作。例如如果表中的名称列包含Helium，则突出显示一行

Answer 1

您可以为此使用 ngClass。将其添加到表格代码的底部：

  <mat-row *matRowDef="let row; columns: displayedColumns;"
  [ngClass]="{'highlight': selectedRowIndex == row.id, 'name_highlighter': row.name === 'Helium'}"
  (click)="highlight(row)">
  </mat-row>

在你的 CSS 中：

.name_highlighter {
    background-color: red;
}