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

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

1 голос
/ 21 октября 2019

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

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

enter image description here

как мой код выглядит начальным: 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, потому что теперь я не вижу в консоли, сколько раз это будет выполнено. Какой лучший способ ее решить?

1 Ответ

0 голосов
/ 21 октября 2019

Как правило, вы можете «отобразить» ваш массив и преобразовать его в массив объектов, например, 

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 только так многоколичество элементов в вашем массиве "values"

...