angular - 在 Angular 2 中的数字范围上使用 ngSwitch

Question

我最近开始学习 Angular2。

我想知道是否有可能使用 ngSwitch 或 ngIf angular2

针对特定数值范围的指令？

假设我想根据范围更新一些文本的颜色。

<25 = Mark the text in red
>25 && <75 = Mark the text in orange
>75 = Mark the text in green

我如何使用 Angular2 ngIf/ngSwitch 指令实现同样的效果。

有没有办法这样写？

<div [ngIf]="item.status < 25">
<h2 class="text-red">{{item.status}}</h2>
</div>
<div [ngIf]="item.status > 25 && item.status < 75">
<h2 class="headline text-orange">{{item.status}}</h2>
</div>
<div [ngIf]="item.status > 75">
<h2 class="headline text-green">{{item.status}}</h2>
</div>

或任何与使用 ngSwitch、ngSwitchWhen 语句有关的内容。

Answer 1

使用 *ngIf 你会这样做:

<div *ngIf="item.status < 25">
    <h2 class="headline text-red">{{item.status}}</h2>
</div>
<div *ngIf="item.status > 25 && item.status < 75">
    <h2 class="headline text-orange">{{item.status}}</h2>
</div>
<div *ngIf="item.status > 75">
    <h2 class="headline text-green">{{item.status}}</h2>
</div>

[ngSwitch] 的语法是这样的:

<div [ngSwitch]="true">
    <h2 *ngSwitchCase="item.status < 25" class="headline text-red">{{item.status}}</h2>
    <h2 *ngSwitchCase="item.status > 25 && item.status < 75" class="headline text-orange">{{item.status}}</h2>
    <h2 *ngSwitchDefault class="headline text-green">{{item.status}}</h2>
</div>

快速笔记

• 旧的 *ngSwitchWhen 现在用作 *ngSwitchCase
• item.status > 75 及以上的情况由 *ngSwitchDefault 自动处理