如何使用 ngStyle 在 Angular 中使用 IF THEN ELSE？

Question

我正在尝试根据 STATUS 值在 table 突出显示行。我可以通过以下方式让它使用黄色或无颜色：

[ngStyle]="{'background-color': cnresult.STATUS === 1 ? 'yellow' : ''}"

如果 STATUS === 2 变为红色，我该如何添加另一个选项？

Answer 1

您可以链接多个三元运算

[ngStyle]="{'background-color': cnresult.STATUS === 1 ? 'yellow' : cnresult.STATUS === 2 ? 'red' : ''}"

另一个可能更易于维护的选项是有条件地应用 class(es)，如下所示：

<div [class.yellow]="cnresult.STATUS === 1"
     [class.red]="cnresult.STATUS === 2"
></div>

// This belongs in your .css file
.yellow {
  background-color: yellow;
}

.red {
  background-color: red;
}

Answer 2

可以在ts文件中创建地图对象

colorMap = {
    '1': 'yellow',
    '2': 'red',
}

<div [ngStyle]="{'background-color': colorMap[cnresult.STATUS] || ''}"></div>

通过这个你可以添加多个条件

Answer 3

你也可以这样做，

[ngStyle] = "{'background-color': getBackground(cnresult.STATUS)}"

然后在您的 component.ts 文件中，

getBackground(status) { (2)
    switch (status) {
      case 1:
        return 'yellow';
      case 2:
        return 'green';
      case 3:
        return 'red';
    }
}

如何使用 ngStyle 在 Angular 中使用 IF THEN ELSE？

How can you have an IF THEN ELSE in Angular with ngStyle?

html

ng-style

angular