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。将其添加到表格代码的底部：

setLike(iid, video) {
    this.likeservice.setLike(iid, video.id).subscribe(
        data => {
            video.isLiked = true;
        }
    );
}

revokeLike(iid, video) {
    this.likeservice.revokeLike(iid, video.id).subscribe(
        data => {
            video.isLiked = false;
        }
    );
}

并在你的CSS中：

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

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

1 个答案: