Angular - NgClass，多个条件答案

【问题标题】：Angular - NgClass, multiple conditionsAngular - NgClass，多个条件
【发布时间】：2020-05-12 13:20:27
【问题描述】：

我正在循环一个包含不同百分比的数组。但是，我想根据数据库中的答案是否等于数组中的值之一来添加类。

下面的示例循环遍历数组中的值。我想做的是说，'如果答案是'0'，应用一个名为'red'的类，如果不是，添加一个'transparent'类。如果答案恰好是“20”，则添加一个“amber”类名。如果不是，“透明”。

我正在尝试的多种变体似乎碰壁了。

<div *ngFor="let percent of percentages" 
     [ngClass]="{
         (answer =='0') ? 'red':'transparent',
         (answer =='20') ? 'amber':'transparent',         
     }">
     {{ percent }}
</div>

编辑 - 澄清 我正在尝试做的是简化以下内容。这是将每个百分比写成它自己的 div。我正在尝试做的是实现相同的结果，但通过循环遍历百分比数组。

<div [ngClass]="answer==='0' ? 'red' : 'bg-transparent'"> 0% </div>

<div [ngClass]="answer==='25' ? 'amber' : 'bg-transparent'"> 25% </div>

<div [ngClass]="answer==='50' ? 'orange' : 'transparent'"> 50% </div>

【问题讨论】：

并非所有内容都必须进入模板。如果它让您的生活更轻松，只需为其创建一个功能。 :)
但在您的问题中，答案是通用词。所以它影响所有。所以你需要为每个百分比元素添加一个属性

标签： angular ng-class

【解决方案1】：

把其他条件放到else选项部分demo

 <div *ngFor="let percent of percentages" 
         [ngClass]="(answer =='0') ? 'red': (answer =='20') ? 'amber':'transparent ">
         {{ percent }}
    </div>

【讨论】：

感谢您的宝贵时间！ - 但是，如果答案为 0，则所有 div 都会变红，而不是答案为 0 的单个 div。
Okey 是你的条件如果 0 然后红色如果 20 然后琥珀色否则透明？
我已经更新了这个问题，希望能提供更多的清晰度
但在您的问题中，答案是通用词。所以它影响所有。所以你需要为每个百分比元素添加一个属性
'answer' 是数据库中的值。感觉就像这样，但多个版本应该可以工作：answer == percent && answer == '0': 'red'。只是不确定如何为其他百分比做多个条件。你觉得这样行吗？

【解决方案2】：

你可以使用三元法操作符

<div *ngFor="let percent of percentages"
 [ngClass]="{ answer == '0' ? 'red' : answer == '20' ? 'amber' : 'transparent'}">
 {{ percent }}
</div>

【讨论】：

【解决方案3】：

如何在组件中而不是模板中移动条件？

类似的东西

// template
<div *ngFor="let percent of percentages" 
     [ngClass]="foo(answer)">
     {{ percent }}
</div>


foo(answer) {
   if(answer === '0') {
      return 'red';
   }
   if (answer =='20' ) { 
      return 'amber'
   }    

// add more condition here or use a switch statement above.
    return 'transparent';
}

【讨论】：

感谢您的回复！ - 为了更清楚，我更新了问题。目前，这将对 ngFor 中的所有 div 应用一类“红色”。事实上，它应该只有答案为 0 的 div。另外，如果我的数组有 20 个百分比选项，这个函数会被调用 20 次？
@Haven 即使没有函数，你也会运行你的条件 20 次；）这就是为什么我立即使用 return 以便其余代码不会运行
不确定你的意思是将red 类应用于所有div。你可以看到，当答案为 0 时，他们只会得到一个 red 的类
我想我很难清楚地表达这个要求。如果答案是 0，那么只有百分比为 0 的 div 应该有红色背景。所有其他人都不应该。这有意义吗？
@Haven 你的意思是这样的吗？ stackblitz.com/edit/…

【解决方案4】：

ngClass 的语法是 {'class1':condition1,'class2':condition2...} 所以我认为这更能说明问题

<div class="transparent" [ngClass]="{'red':answer == '0',
                                     'amber':answer == '20',
                                     'orange':answer==50}">

【讨论】：