使用* ngFor时，如何在Typescript上更改表格的颜色单元格

Question

我有这张图片：

我要做的是，细胞有不同的颜色。主要动作= 1绿色和动作= 0红色。

我有这个HTML代码：

  <div class="row" colum>
    <div class="grid-container">
      <table *ngFor="let item of notification">
        <tr style="text-align:center">
          <ul> {{item.alarmdesc}}</ul>
          <ul> {{getProductName(item.device_serial)}}</ul>
          <ul> {{item.datetime_device | date:'d/MM/yyyy'}}</ul>
          <ul>
            <button style="border-style: groove; 
          width:70%; 
          height:30%; 
          margin: 15%;
          border: 1px solid rgb(198, 199, 198);
          padding: 10px;cursor: pointer;" (click)="OnAced(item.id)">main action: {{item.acted}}
        </button> 
        </ul>
        </tr>
      </table>
    </div>
  </div>

Answer 1

如果动作在您的项目

中，您可以尝试使用条件运算符

<div [style.border-color]="item.action == 1 ? 'green' : 'red' "></div> 

Answer 2

首先，使用内联样式是一种不好的做法，您应该使用与该组件相关的css文件。

你可以这样做：

css文件：

.cell {
   text-align: center;
}

.green {
   color: "green";
}

组件文件：

isGreen(main): boolean {
  return main === 1
}

然后你可以将css类附加到这样的元素：

<tr class="cell" [class.green]="isGreen(main)"></tr>