javascript - Angular无限循环调用函数

Question

在一些 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 还很陌生，不确定如何在不引起循环的情况下检索这些数据。也许更有经验的人可以提供一些帮助？

Answer 1

这不是无限循环，它只是 Angulars 变化检测。

在开发过程中，每个变更检测运行也会在第 2 轮之后进行。任何异步调用完成(事件处理程序、超时...)时都会运行更改检测，因此可能会经常发生。

通常应避免绑定(bind)到 View 中的函数，而是将结果分配给一个字段并绑定(bind)到该字段。 Angular 非常有效地检查字段值是否已更改。