如何有条件地突出显示角材料表行？

Posted 2023-03-05

【中文标题】如何有条件地突出显示角材料表行？

【英文标题】：How to highlight angular-material table row conditionally?

【发布时间】：2018-05-19 14:27:27

【问题描述】：

我刚开始使用一种基本方法，因此我想有条件地突出显示行颜色，它不会引发任何错误，但不会将背景颜色应用于行。我有 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>

组件.css

.high 
  background-color: red;

【问题讨论】：

能输出row.riskIndex吗？你的语法看起来是正确的，我想知道它是否只是“H”而不是高，正如你在顶部所说的那样？

在这里试试：material row highlight

【参考方案1】：

假设，您想通过某个模型属性突出显示mat-row。让我们说当状态 == 批准时突出显示。

<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'],

    )

【讨论】：

很高兴它帮助了你！

谢谢！此答案应标记为已回答！非常感谢您的帮助。