Angular中使用*ngFor时，如何通过TypeScript按action值设置表格单元格颜色

嘿，我来帮你搞定这个需求！其实有两种常用的实现方式，都能轻松让单元格根据action值显示不同颜色，咱们一步步来看：

方法一：使用ngStyle动态绑定行内样式 #

这种方式适合简单的样式需求，直接在模板里通过三元表达式判断action值，绑定对应的背景色：

假设你要给包含action相关内容的单元格（或者按钮、行）设置颜色，修改你的HTML代码如下：

<div class="row" colum>
  <div class="grid-container">
    <!-- 小提示：通常*ngFor应该循环<tr>而非整个<table>，这样所有数据会在同一张表格里，结构更合理 -->
    <table>
      <tr style="text-align:center" *ngFor="let item of notification">
        <ul>{{item.alarmdesc}}</ul>
        <ul>{{getProductName(item.device_serial)}}</ul>
        <ul>{{item.datetime_device | date:'d/MM/yyyy'}}</ul>
        <!-- 给目标单元格绑定动态样式 -->
        <ul [ngStyle]="{'background-color': item.action === 1 ? 'green' : 'red'}">
          {{item.action}}
        </ul>
        <!-- 如果是按钮需要变色，这样绑定 -->
        <ul>
          <button [ngStyle]="{'background-color': item.action === 1 ? 'green' : 'red'}">
            操作按钮
          </button>
        </ul>
      </tr>
    </table>
  </div>
</div>

注意：如果你的字段是main action（比如属性名是mainAction），记得把item.action换成item.mainAction哦。

方法二：使用ngClass结合CSS类（更推荐，利于维护） #

如果后续需要调整样式或者扩展更多状态，用CSS类的方式会更灵活，也方便统一管理样式：

1. 首先在组件的CSS/SCSS文件中定义两个样式类：

.green-bg {
  background-color: #2ecc71; /* 柔和的绿色，也可以直接用'green' */
  color: white; /* 可选：让文字更清晰 */
  padding: 4px 8px;
}

.red-bg {
  background-color: #e74c3c; /* 柔和的红色 */
  color: white;
  padding: 4px 8px;
}

2. 然后在模板中通过ngClass绑定对应的类：

<div class="row" colum>
  <div class="grid-container">
    <table>
      <tr style="text-align:center" *ngFor="let item of notification">
        <ul>{{item.alarmdesc}}</ul>
        <ul>{{getProductName(item.device_serial)}}</ul>
        <ul>{{item.datetime_device | date:'d/MM/yyyy'}}</ul>
        <!-- 用三元表达式简化类绑定 -->
        <ul [ngClass]="item.action === 1 ? 'green-bg' : 'red-bg'">
          {{item.action}}
        </ul>
        <!-- 按钮的绑定方式，也可以用对象语法 -->
        <ul>
          <button [ngClass]="{'green-bg': item.action === 1, 'red-bg': item.action === 0}">
            操作按钮
          </button>
        </ul>
      </tr>
    </table>
  </div>
</div>

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