在 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

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

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

想法是，当表达式为真时，return value *ngSwitchWhen 匹配 [ngSwitch] 值。

Answer 2

使用 *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 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 时使用 [class]，或者在返回 classes 数组时使用 [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']。这同样有效。

在 Angular 2 中的数字范围内使用 ngSwitch

Using ngSwitch on a numeric range in Angular 2

ng-switch

angular-ng-if

angular