Как избежать использования функции в ngStyle или ngClass?

Это раздражающая проблема, если я могу так сказать... Если я использую метод в шаблоне, он будет вызываться так много раз.... из-за обнаружения изменений в Angular.

3511 сообщений (вызовов методов) всего за 30 секунд, всего для 12 элементов.

введите здесь описание изображения

как мой код выглядит изначально: html:

<td *ngFor="let value of values"
      class="value">
    <span [ngStyle]="getValueStyle(value)">{{value}}</span>
  </td>

.ts: 

getValueStyle(value: any) {
console.log(value);
let stringValue = value.toString();
if (!stringValue.includes('%')) return '';

let index = stringValue.indexOf('%');
let formatedNumber = stringValue.substring(0, index).replace(/\s/g, '');
let numberValue = Number(formatedNumber);
if (Number.isNaN(numberValue) || numberValue == 0) {
  return {'color': '#585858'};
} else if (numberValue > 0) {
  return {'color': '#009900'};
} else if (numberValue < 0) {
  return {'color': '#cc0000'};
}

return '';

}

Чтобы не использовать функцию в шаблоне, я объявил 3 класса в .scss и сделал проверку в .html (может это сделать, потому что это простое сравнение)

<td *ngFor="let value of values"
      class="value">
    <span [ngClass]="!value.includes('%')
      ? 'neutral'
      : value.includes('-')
          ? 'negative'
          : (value == '0')
            ? 'neutral'
            : 'positive'">{{value}}</span>
  </td>

Но если мне нужно вычислить динамический стиль, как избежать этих повторных вызовов? В любом случае, я не знаю, является ли использование ngClass хорошим решением вместо ngStyle, потому что теперь я не вижу в консоли, сколько раз это будет выполняться. Каков наилучший способ решить эту проблему?


angular styles ng-class ng-style
person AlleXyS    schedule 21.10.2019    source источник
comment
могут быть предопределенными расчетами до рендеринга в представлении, если это возможно.   -  person Pardeep Jain    schedule 21.10.2019
comment
Вы можете использовать канал для уменьшения вызовов функций   -  person MoxxiManagarm    schedule 21.10.2019
comment
Я знаю, что использую пайп, его поведение такое же. Для каждого события мыши выполняется конвейер   -  person AlleXyS    schedule 21.10.2019
comment
Вы пробовали purepipe? dzone.com/articles/   -  person MoxxiManagarm    schedule 21.10.2019

Ответы (1)


arrow_upward
0
arrow_downward

В общем, вы можете «отобразить» свой массив и преобразовать его в массив объектов, например.

const listValues=this.values.map(x=>{
   return {
      value:x,
      style:this.getValueStyle(x)
   }
})

И использовать

<td *ngFor="let item of listValues"
      class="value">
    <span [ngStyle]="item.style">{{item.value}}</span>
  </td>

Итак, вызывайте getValueStyle столько раз, сколько элементов есть в вашем массиве "значения"

person Eliseo    schedule 21.10.2019