角无限循环调用函数答案

【问题标题】：Angular inifinite loop calling function角无限循环调用函数
【发布时间】：2018-01-14 00:09:40
【问题描述】：

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

【问题讨论】：

标签： javascript angular

【解决方案1】：

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

在开发中，每个变更检测运行也遵循第二轮。当任何异步调用完成（事件处理程序、超时等）时就会运行更改检测，因此可能会经常发生。

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

【讨论】：

好吧，这是有道理的，但考虑到我必须在循环订单时执行此操作，我不确定如何完成此操作。
在getOrderList 中，当您收到订单时，遍历它们并将它们放入一个类似this.orders = orders.map(order => { order: order, user: getUser(order.orderId) }); 的数组中，然后在绑定中使用{{ order.user.emailAddress }}
我用过这个：this.orders = orders.map(order => { return { order: order, user: this.getUser(order.orderNr)}; });这听起来像是一个很好的解决方案，但不幸的是它似乎对我不起作用。用户仍未定义，订单在我的 html 中不再可见。
订单实际上是通过使用 {{ order.order.orderNr }} 可见的。
是的。我认为你的方法不起作用的原因也是因为我的 html 显示的摄入量.intake.attribute 是错误的，即使它起作用了。