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

Недавно я начал изучать 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.


angular angular-ng-if ng-switch
person this-Me    schedule 14.06.2016    source источник

Ответы (4)


arrow_upward
4
arrow_downward

С *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
person rinukkusu    schedule 14.06.2016

arrow_upward
1
arrow_downward

Я предлагаю вам перенести логику в компонент, у вас будет меньше шаблонов, и с ним будет проще работать:

<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)">
person Sasxa    schedule 14.06.2016

arrow_upward
1
arrow_downward

Это может сработать, но я сам не пробовал:

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

person Günter Zöchbauer    schedule 14.06.2016

arrow_upward
0
arrow_downward

При работе с условным стилем 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']. Это работает так же хорошо.

person Femi Abolaji    schedule 01.04.2017