いくつかのAngularプロジェクトでは、同じ問題が発生します。HTML内で関数(APIから値を取得する)を呼び出そうとすると、無限ループがトリガーされます。以下の例では、ループをトリガーするのはgetUser()です。
HTML
<ul>
<li *ngFor="let order of orders">
{{ getUser(order.orderNr).emailAddress }}
</li>
</ul>
成分
private getOrdersList() {
this.orderService.getAll().subscribe(
orders => {
this.orders = orders;
}
);
}
public getUser(orderNr: number) {
return this.orderService.getUser(orderNr);
}
サービス
public getAll(): Observable<Order[]> {
return this.api.get<Order[]>('orders');
}
public getUser(orderNr: number) {
return this.api.get<void>('orders/'+orderNr);
}
Angularがデータを処理する方法と関係があると思いますが、私はAngularにかなり慣れておらず、ループを発生させずにこのデータを取得する方法がわかりません。おそらく、より経験豊富な誰かがいくつかの助けを提供することができますか?
これは無限ループではなく、Angularsの変更の検出にすぎません。
開発では、各変更検出の実行も2番目のターンに続きます。変更検出は、非同期呼び出し(イベントハンドラー、タイムアウトなど)が完了すると実行されるため、非常に頻繁に発生する可能性があります。
通常、ビュー内の関数へのバインドは避け、代わりに結果をフィールドに割り当て、代わりにそのフィールドにバインドする必要があります。Angularは、フィールド値が変更されたかどうかを非常に効率的にチェックします。
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加