在Angular 2的数值范围内使用ngSwitch

我最近开始学习Angular2。在Angular 2的数值范围内使用ngSwitch

我想知道是否有使用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语句有关的事情。

来源

2016-06-14 this-Me

随着*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

来源

2016-06-14 09:04:25 rinukkusu

这可能会实现，但我还没有尝试过自己：

<div [ngSwitch]="value"> 
    <p *ngSwitchCase="'init'">increment to start</p> 
    <p *ngSwitchCase="item.status < 25 ? value">a</p> 
    <p *ngSwitchCase="item.status > 25 && item.status < 75 ? value ">c</p> 
    <p *ngSwitchCase="item.status > 75 ? value">d</p> 
    <p *ngSwitchDefault>else</p> 
</div>

的想法是，当表达式为真，则返回value为*ngSwitchWhen匹配[ngSwitch]值。

来源

2016-06-14 09:04:05

自动处理，我建议你移动逻辑组件，你可以少样板，而且它更容易使用：

<div> 
    <h2 [class]="switchClass(item.status)">{{item.status}}</h2> 
</div> 

switchClass(item.status) { 
    if (item.status < 25) return "text-red"; 
    else if (25 < items.status && item.status < 75) return "headline text-orange"; 
    else if (75 < items.status) return "headline text-green"; 
}

虽然你可以这样写：

<div *ngIf="(item.status > 25) && (item.status < 75)">

来源

2016-06-14 09:04:33 Sasxa

在处理angular2有条件的造型，最好使用[class]当你添加一个类或[ngClass]当你正在返回一个像这样的类的数组：headline text-green someOtherClass。

// display div 
<div [ngClass]="getItemClass(item.status)">{{item.status}}</div> 

// logic 
getItemClass(status) { 
    let itemClass: string; 

    if (status < 25) { 
    itemClass = 'text-red'; 
    } else if (status > 25 && status < 75) { 
    itemClass = 'headline text-orange'; 
    } else { 
    itemClass = 'headline text-green'; 
    } 

    return itemClass; 
}

类似的，而不是宣布itemClass作为一个字符串，我们可以宣布它作为一个数组，在这种情况下即let itemClass: Array<string>;我们重新分配它在我们如果块作为itemClass = ['headline', 'text-green']。这工作正常。

来源

2017-04-01 08:45:27

在Angular 2的数值范围内使用ngSwitch

回答

相关问题