时间戳

首页 > 解决方案 > Angular - NgClass，多个条件

angular - Angular - NgClass，多个条件

问题描述

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

下面的示例循环遍历数组中的值。我想做的是说，'如果答案是'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>

标签： angularng-class

解决方案

将其他条件放在其他选项部分演示中

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

推荐阅读