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

Posted 2023-03-06

【中文标题】如何在 Angular 中使用 ngStyle 实现 IF THEN ELSE？

【英文标题】：How can you have an IF THEN ELSE in Angular with ngStyle?

【发布时间】：2021-11-06 05:06:29

【问题描述】：

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

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

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

【问题讨论】：

在你的组件中添加一个颜色属性，并根据状态进行设置。然后将 background-color 设置为设置的颜色

【参考方案1】：

您可以链接多个三元运算

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

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

<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;

【参考方案2】：

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

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


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

这样可以添加多个条件

【讨论】：

也是一种简洁的方法:)

谢谢！ @PhilippMeissner

【参考方案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';