angular - объявить результат конвейера как локальную переменную - PullRequest
Новая
       29

angular - объявить результат конвейера как локальную переменную

0 голосов
/ 09 ноября 2018

Я дважды использую процентную трубу ngx-pipe в метке. Один раз, чтобы определить, какой класс цвета (успех или информация) и один раз, чтобы отобразить процент. 

<label class="label" [ngClass]="(item.amount |
percentage:item.total) >= 100 ? 'label-success' : 'label-info'">Progress {{item.amount | percentage:item.total:true}}%</label>

Есть ли способ, которым я могу сохранить результат этого канала как локальную переменную шаблона только один раз, как 

<label class="label" #percent="(item.amount |
percentage:item.total)" [ngClass]="percent >= 100 ? 'label-success' : 'label-info'">Progress {{percent}}%</label>

Я знаю, что вы можете хранить его в директивах * ngIf или * ngFor, например 

<div *ngIf="item$ | async as item">

или 

<div *ngIf="item$ | async; let item">

Есть ли похожий подход к моей проблеме?

1 Ответ

0 голосов
/ 09 ноября 2018

AFAIK невозможно написать сейчас в псевдоним вычисленную привязку во время выполнения (* ngFor с pipe является исключением), но вы можете сделать это. Создайте function / Pure pipe и примените к этой функции памятку, чтобы вычисления были меньше. 

<label class="label" 
  [ngClass]="getPercentage(item) >= 100 ? 'label-success' : 'label-info'">
     Progress {{getPercentage(item)}}%
</label>

Компонент 

calculation: any = {};
percentage = new PercentPipe();
// below function can be stay as pure Pipe as well.
getPercentage (item) {
   let key = `${item.amount}-${item.total}`
   if(!calculate[key]) calculate[key] = percentage.transform(item.amount, item.total, true);
   return calculate[key];
}

По этому решению мы вычисляли значение один раз и использовали его в другом месте. Но не в переменной шаблона, а запоминание последнего вычисленного значения в компоненте.

...