我有一個帶有角度應用程序的 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 中將使代碼變得骯臟且難以維護。我應該做什么才能使這項工作正常進行？我應該為每個項目使用管道嗎？
1 回答
繁星coding
TA貢獻1797條經驗 獲得超4個贊
您設置組件，以便在需要運行時運行。
寫一個函數，如：
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>
- 1 回答
- 0 關注
- 143 瀏覽
添加回答
舉報
0/150
提交
取消