как выделить столбец в таблице данных материала на основе определенного условия нагрузки

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;
}