鉴于绑定功能性能低下

Question

我有一个带 angular 应用程序的 ionic 4，我还在我的 componentA 中实现了 websocket。 componentA.html:

<div *ngFor="let item of myList">
   <div>{{ item.name }}</div>
   <div>{{ calcPrice(item.price) }}</div>
   <div>{{ calcDistance(item.distance) }}</div>
   <div>{{ calcAge(item.age) }}</div>
   <div>{{ setColor(item.color,item.name) }}</div>
</div>

这里是 myList 的示例：

[
  {...},
  {...},
  {...},
  {...},
...
]

myList 是一个数组，通常包含 20 个项目，这些项目是用我的 websocket 更新的。当我进入页面时，我遇到了一个很大的性能问题，当我的列表通过大约 8 个项目时，我的应用程序完全冻结，所以我开始做一个大的研究，我发现在视图上使用函数是一个不好的做法

文章：here and here

我使用的每个函数都有一个 return，我需要这些函数进行计算等，将其放入 html 会使代码变脏且难以维护。

我应该怎么做才能使这项工作正常进行？我应该为每个项目使用管道吗？

编辑：

这是我在 html

中使用的功能之一

  calcVolum(item) {
    if (
      TestClass.startsWithA(item.name) &&
      !this.needHelp(item.name)
    ) {
      return (
        Number(item.price.replace(this.regexPts, '')) *
        Number(item.currentQuantity) *
        item.age
      );
    } else if (this.needHelp(item.name)) {
      return (
        Number(item.price.replace(this.regexPts, '')) *
        Number(item.currentQuantity) *
        item.dolptax *
        item.age
      );
    }

    return (
      Number(item.price.replace(this.regexR$, '').replace(',', '.')) *
      item.currentQuantity
    );
  }

Answer 1

您设置组件，以便在需要运行时运行。

写一个像这样的函数：

calculateItemValues(items) {
  return items.map(i => {
    return Object.assign({}, i,
      {
        priceCalc: this.calcPrice(i.price);
        // however many else you need
      }
    );
  });
}

在需要时（当项目发生变化时）调用它，可能像 this.calcItems = this.calculateItemValues(this.items) 或在 rxjs 中 map 语句通常是一个好地方，并迭代计算：

<div *ngFor="let item of calcItems">
   <div>{{ item.name }}</div>
   <div>{{ item.priceCalc }}</div>
   <!-- whatever else you set -->
</div>

鉴于绑定功能性能低下

low performance in binding function in view

html

performance

angular

ionic4