时间戳

首页 > 解决方案 > 在 mat 表中使用 NG-CLASS 引用“行”元素以进行 css decleration

css - 在 mat 表中使用 NG-CLASS 引用“行”元素以进行 css decleration

问题描述

我有一个有几列的垫子表。其中一列是状态字段。我想将该记录的状态放在该列中的彩色徽章。我让它们成为不可点击的按钮。记录可以具有“已完成”、“已删除”和“已取消”三种状态之一。当它加载以设置颜色时，我似乎无法让它动态工作。我见过很多人们使用 ng-class 的例子，我正在努力实现它，或者更多地参考 row.OrderStatus 的值。

HTML

<!-- Status Column -->
<ng-container matColumnDef="status">
  <th mat-header-cell *matHeaderCellDef>Status</th>
  <td mat-cell *matCellDef="let row">
  <button ng-class="row.OrderStatus">{{row.OrderStatus}}</button>
  </td>
</ng-container>

CSS

.Completed{
  background: green;
}

.Cancelled{
  background: yellow;
}

.Deleted{
  background: red;
}

标签： cssangular

解决方案

那是不正确的语法ngClass。查看文档以获取正确的语法。

这应该适合你。

<button [ngClass]="{'Completed': row.OrderStatus === 'Completed', 'Deleted': row.OrderStatus === 'Deleted', 'Cancelled': row.OrderStatus === 'Cancelled'}">
    {{row.OrderStatus}}
</button>

推荐阅读