在 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自动处理

Answer 2

这可能有效，但我自己还没有尝试过：

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

这个想法是，当表达式为 true 时，则返回 value 以使*ngSwitchWhen与[ngSwitch]值匹配。

Answer 3

我建议你将逻辑移动到组件上，你会有更少的样板文件，并且更容易使用：

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

Answer 4

在处理 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>;在这种情况下，我们将在 if 块中将其重新分配为 itemClass = ['headline', 'text-green'] 。这同样有效。