Angular 如何根据单元格元素数量条件动态修改按钮颜色

你可以使用Angular内置的[ngClass]指令实现动态样式绑定，根据prm.PackageCount的数值切换按钮类名即可：

第一步：准备样式类 #

首先确认你有对应的红绿样式类（如果没有可以补充到你的样式文件中）：

/* 空单元格绿色样式 */
.green {
  background-color: #2ecc71;
}
/* 有元素单元格红色样式 */
.red {
  background-color: #e74c3c;
}
/* 原有的白色前景色保持不变 */
.fuse-white-fg {
  color: #fff;
}

第二步：修改模板代码 #

把原来固定写死的green类改成动态绑定的形式，判断PackageCount为0时用绿色类，非0时用红色类：

<button 
  mat-button 
  class="fuse-white-fg"
  [ngClass]="prm.PackageCount === 0 ? 'green' : 'red'"
  *ngFor="let prm of cell"
>
  Package Count: {{prm.PackageCount}}
</button>

兼容特殊情况说明 #

如果你的PackageCount可能出现null/undefined这类空值也需要判定为空单元格，可以把判断条件简化为：

[ngClass]="!prm.PackageCount ? 'green' : 'red'"

这个写法会把0、null、undefined、空字符串都判定为空单元格，统一显示绿色。 #

内容的提问来源于stack exchange，提问作者Rocket Monkey