我有一個帶有角度應(yīng)用程序的 ionic 4，我還在我的組件 A 中實現(xiàn)了 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 是一個數(shù)組，通常包含 20 個項目，這些項目使用我的 websocket 進行更新。當我進入頁面時，我遇到了一個很大的性能問題，當我的列表經(jīng)過大約 8 個項目時，我的應(yīng)用程序完全凍結(jié)，因此開始進行一項大型研究，我發(fā)現(xiàn)使用視圖中的函數(shù)是一個糟糕的做法文章：這里和這里我使用的每個函數(shù)都有一個返回值，我需要這些函數(shù)進行計算等，將其放入 html 中將使代碼變得骯臟且難以維護。我應(yīng)該做什么才能使這項工作正常進行？我應(yīng)該為每個項目使用管道嗎？
1 回答
繁星coding
TA貢獻1797條經(jīng)驗 獲得超4個贊
您設(shè)置組件，以便在需要運行時運行。
寫一個函數(shù)，如：
calculateItemValues(items) {
return items.map(i => {
return Object.assign({}, i,
{
priceCalc: this.calcPrice(i.price);
// however many else you need
}
);
});
}
每當你需要時（當項目發(fā)生變化時）調(diào)用它，也許像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>
- 1 回答
- 0 關(guān)注
- 168 瀏覽
添加回答
舉報
0/150
提交
取消