私はAngularアプリを備えたionic4を持っていますが、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項目を通過するとアプリが完全にフリーズするため、大規模な調査を開始し、ビューで関数を使用するのは悪い習慣であることがわかりました
私が使用するすべての関数には戻り値があり、それらの関数が計算などを行う必要があります。これをhtml内に配置すると、コードがダーティになり、保守が困難になります。
これを適切に機能させるために私は何をすべきですか？各アイテムにパイプを使用する必要がありますか？
編集：
これが私のhtmlで使用した関数の1つです
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
);
}
実行する必要があるときに実行されるようにコンポーネントを設定します。
次のような関数を記述します。
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>
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加