根据状态更改多垫进度条颜色？

Question

在我的项目中，我有一个 mat-table，每行都有一个 mat-progress-bar

  <mat-cell *matCellDef="let element">
      {{element.id}} - {{element.address}}
  <mat-progress-bar  mode="determinate"
      [value]="element.status" class="green-progress"></mat-progress-bar>
  </mat-cell>

根据我的 CSS class

默认颜色为绿色

 .green-progress .mat-progress-bar-fill::after {
  background-color: $green !important;
}

我想根据状态将颜色更改为橙色

  .orange-progress .mat-progress-bar-fill::after {background-color: $orange !important;}

我想要实现的是 change/display 根据我从 API

获得的状态在每一行中单独显示颜色

状态良好 = 绿色/状态警告 = 橙色

我尝试使用 ngClass

[ngClass]="{'orange-progress': !isGoodStatus,'green-progress': isGoodStatus}"

但问题是它改变了每一行的进度条颜色相同（橙色或绿色）。

最好的方法是什么？

谢谢！

Answer 1

我假设您正在 table 或其他地方循环您的数据对象。因此，您可以为对象添加色域。每当需要时，更改该对象的颜色以警告/主要/强调。

在.html:

<mat-spinner color="{{element.color}}"></mat-spinner>

如果是mat-table，您可能需要在更改对象颜色后重新渲染table。在 .ts 中添加以下内容：

@ViewChild(MatTable, {static: false}) table: MatTable<tableType>;

应用颜色更改后：

table.renderRows()

根据状态更改多垫进度条颜色？

Change multi mat-progress-bar color based on status?

angular-material

material-ui

angular

mat-table