Question

这就是我所拥有的：

home.html的

    // store current unit value
    var userPrefUnits = app.preferences.rulerUnits;

    // change to pixels if not pixels
    if(userPrefUnits !== Units.PIXELS){
       app.preferences.rulerUnits = Units.PIXELS;
    }

    // code based on pixels

    // reset preference if userPrefUnits was not pixels
    if(userPrefUnits !== Units.PIXELS){
       app.preferences.rulerUnits = userPrefUnits;
    }

在 home.ts 我已定义变量<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>，并为其分配了一个值。

我想将有边界的类分配给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>

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

2 个答案: