Angular

Question

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

下面的示例循环遍历数组中的值。我想做的是说，'如果答案是'0'，应用名称为 'red' 的 class，如果不是，则添加 [=24= 的 class ].如果答案恰好是“20”，则添加一个 class 名称 'amber'。如果没有，'transparent'.

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

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

Answer 1

将其他条件放在else选项部分demo

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

Answer 2

您可以使用 Ternery 运算符

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

Answer 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';
}

Answer 4

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

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

Angular - NgClass，多个条件

Angular - NgClass, multiple conditions

ng-class