Использование ngSwitch в числовом диапазоне в Angular 2

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>

Идея состоит в том, что когда выражение верно, то возвращаем 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'], Это работает так же хорошо.