在angular2中使用*ngIf赋值

Question

我有:

home。

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

在<<p> strong>回家。我已经定义了变量myVar，并为它分配了一个值。

我想给myList的元素分配一个border class，它的值等于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>