Angular 2 ngClass 条件数据？

Question

所以我基本上是在尝试在已经选择了一个对象的情况下设置高亮显示。如何比较要更改的对象类？像这样

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

Answer 1

您希望 {{}} 中的整个表达式求值为您想要的 class 字符串

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

Answer 2

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

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

或

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

会起作用。

Angular 2 ngClass 条件数据？

Angular 2 ngClass conditional with data?

css

conditional

ng-class

angular