在angular2中使用*ngIf评估指定样式

Question

这就是我所拥有的:

home.html的

<li *ngFor="let item of myList">
        <div *ngIf="item.messageText === {{myVar}}" class="bordered">{{item.messageText}}</div>
        <div *ngIf="item.messageText !== {{myVar}}" class="greyedOut">{{item.messageText}}</div>
</li>

在home.ts我已定义变量myVar,我已为其分配了一个值.

我想将有边界的类分配给myList的元素,该元素的值等于,myVar如果该元素的值不同,则分配另一个类.

Answer 1

*如果在表达式中更改{{myVar}}为myVar(无插值),则ngIf将起作用.

<li *ngFor="let item of myList">
    <div *ngIf="item.messageText === myVar" class="bordered">{{item.messageText}}</div>
    <div *ngIf="item.messageText !== myVar" class="greyedOut">{{item.messageText}}</div>
</li>

虽然我希望你在ngClass这里使用,但更清洁,更好的解决方案.

<li *ngFor="let item of myList">
    <div [ngClass]="item.messageText == item.messageText ? 'bordered': 'greyedOut'">
      {{item.messageText}}
    </div>
</li>

要么

<li *ngFor="let item of myList">
    <div [ngClass]="{'bordered': item.messageText == item.messageText, 'greyedOut': item.messageText !== item.messageText }">
      {{item.messageText}}
    </div>
</li>

Answer 2

完成Panjak Parkar的回答，并回答标题中的问题（风格）

<li *ngFor="let item of myList">
    <div [ngStyle]="{'background-color':item.country === 'UK' ? 'green' : 'red'}">
    </div>
</li>