如何有條件地突出角度材料表行？

Question

我剛剛開始使用基本方法，所以我想有條件地突出顯示行顏色，但不會拋出任何錯誤，但不會將背景顏色應用於行。 我有5行有riskINdex H ，任何想法在下面的代碼中實現了什么錯誤？

app.component.html

<div>
 <mat-table>
  <ng-container matColumnDef="eventType">
        <mat-header-cell *matHeaderCellDef> Event Type </mat-header-cell>
        <mat-cell *matCellDef="let element"> {{element.eventType}} </mat-cell>
      </ng-container>
      <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
      <mat-row *matRowDef="let row; columns: displayedColumns;" (click)="selectedRow(row)" [ngClass]="{ 'high': row.riskIndex === 'High'}"></mat-row>
    </mat-table>
</div>

component.css

.high {
  background-color: red;
}

Answer 1

假設 ，您想通過某些模型屬性突出顯示mat-row 。 讓我們說當status == Approved時突出顯示。

<tr mat-row *matRowDef="let row; columns: displayedColumns;let entry"[ngClass]="{ 'highlight': entry.status == 'Approved' }"></tr>

在上面的代碼行中，

highlight是.css文件中定義的css類。

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

上面的.css文件包含在組件中，如下所示。

 @Component({

      styleUrls: ['./expense.component.css'],

    })