鉴于绑定功能性能低下

Question

我有一个带有角度应用程序的 ionic 4，我还在我的组件 A 中实现了 websocket。组件A.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 个项目时，我的应用程序完全冻结，因此开始进行一项大型研究，我发现使用视图中的函数是一个糟糕的做法文章：这里和这里我使用的每个函数都有一个返回值，我需要这些函数进行计算等，将其放入 html 中将使代码变得肮脏且难以维护。我应该做什么才能使这项工作正常进行？我应该为每个项目使用管道吗？

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)或在 rxjsmap语句中通常是一个很好的地方，并迭代计算：

<div *ngFor="let item of calcItems">

   <div>{{ item.name }}</div>

   <div>{{ item.priceCalc }}</div>

   <!-- whatever else you set -->

</div>