html - 使用 "ngIf"进行 Angular 插值

Question

我有一个表，我希望其中第一列根据类中的变量采用特定颜色。例如，我有一个 DisplayProject.ts 类，它有一个名为 indexOfColor

的属性

DisplayProject.ts

export class DispalyProject implements OnInit {
  ngOnInit(): void {
  }

  project: Project;
  indexOfColor: number = 1; // can be 2 

  constructor () {
  }
}

DisplayProject.html

<table>
  <thead>
    <tr>
      <th>the project name</th>
      <th>the project date</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>project.name</td>
      <td>project.date</td>
    </tr>
  </tbody>
</table>

我希望“元素名称”列在 indexOfColor = 1 时为绿色，在 indexOfColor = 2 时为蓝色

有什么解决方案吗？

Answer 1

您可以使用ngStyle基于变量实现特定样式。

<th [ngStyle]="{ 'background-color': indexOfColor == 1 ? 'green' : 'blue' }">
  the project name
</th>