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