Angular 2 ngClass 以数据为条件？

Posted 2023-02-22

【中文标题】Angular 2 ngClass 以数据为条件？

【英文标题】：Angular 2 ngClass conditional with data?

【发布时间】：2018-06-11 17:40:34

【问题描述】：

因此，如果已经选择了一个对象，我基本上会尝试设置一个突出显示。如何比较对象以更改类？像这样的

<[ngClass]="perkResult.perk === perk.perk ? 'highlight' : 'none-hightlight' ">

当前代码：

<div class="col-xs-12">
  <div class="col-xs-12 benefit-selection">
     <ul class="benefits-dropdown-ul" *ngIf="perkList"> .     
      <a class="benefits-dropdown-div" *ngFor="let perkResult of perkList.results" (click)="onAddPerk(perkResult)">
       //highlight here
        <li class="benefits-dropdown-li"> perkResult.perk </li>
      </a>
     </ul>
  </div>
 </div>

 <div class="col-xs-6 benefit-selected" *ngFor="let perk of company.perks; trackBy: customTrackBy; let i = inde
     perk.perk 
 </div>

【参考方案1】：

您不需要插值括号。在这种情况下，[ngClass] 正在寻找一个表达式，所以

[ngClass]="perkResult.perk === perk.perk ? 'highlight' : 'none-hightlight'"

或

[ngClass]="[perkResult.perk === perk.perk ? 'highlight' : 'none-hightlight']"

会起作用的。

【讨论】：

很好用。但是我有 2 个 for 循环，并且 perk.perk 不会在我想要放置它的位置注册。如何参考？

@Kenzo 所以perk 和perkResult 在不同的范围内。我建议将perk.perk 存储在另一个变量中。 （比如说当某物被选中时）。然后你可以比较perkResult.perk === newVar

【参考方案2】：

您希望 中的整个表达式计算为您想要的类字符串

[ngClass]="perkResult.perk === perk.perk ? 'highlight' : 'none-hightlight'"

【讨论】：

这个解决方案会产生编译错误，因为你不能同时使用[]方括号运算符和插值运算符。一个有效的解决方案在这里：***.com/questions/35269179/…