时间戳

首页 > 解决方案 > 根据状态更改多垫子进度条颜色？

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

问题描述

在我的项目中，我有一个垫子表，每行都有一个垫子进度条

  <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 类颜色为绿色

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

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

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

我想要实现的是根据我从 API 获得的状态在每一行中单独更改/显示颜色

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

我尝试使用 ngClass

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

但问题是它会将每行中的进度条颜色更改为相同（橙色或绿色）。

最好的方法是什么？

谢谢！

标签： angularangular-materialmaterial-uimat-table

解决方案

我假设您在表格或其他地方循环您的数据对象。因此，您可以向对象添加颜色字段。每当需要时，将该对象的颜色更改为警告/主要/重音。

在 .html 中：

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

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

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

应用颜色更改后：

table.renderRows()

推荐阅读