鉴于绑定功能性能低下

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) {&nbsp; return items.map(i => {&nbsp; &nbsp; return Object.assign({}, i,&nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; priceCalc: this.calcPrice(i.price);&nbsp; &nbsp; &nbsp; &nbsp; // however many else you need&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; );&nbsp; });}每当你需要时（当项目发生变化时）调用它，也许像this.calcItems = this.calculateItemValues(this.items)或在 rxjsmap语句中通常是一个很好的地方，并迭代计算：<div *ngFor="let item of calcItems">&nbsp; &nbsp;<div>{{ item.name }}</div>&nbsp; &nbsp;<div>{{ item.priceCalc }}</div>&nbsp; &nbsp;<!-- whatever else you set --></div>