如何避免在ngStyle或ngClass中使用函数？

Question

如果我可以这样说，这是一个令人烦恼的问题...如果我在模板中使用方法，由于Angular的更改检测，这将被称为很多次。...

仅需12秒钟，只需30秒即可发送3511条消息（方法调用）。

我的代码最初看起来如何： 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 '';

}

为避免在模板中使用函数，我在.scss中声明了3个类，并在.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是一个好的解决方案，因为现在，我无法在控制台中看到将执行多少次。最好的解决方法是什么？

Answer 1

通常，您可以“映射”数组并将其转换为对象数组，例如

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元素