用 *ngFor 迭代 Promise<any[]>？

Question

获取一个无限循环，尝试遍历此函数调用产生的承诺：

 public CUSTOMERS = [
    {"id":1,"name":"Crypto Joe", "description":"Love Crypto in the Morning"},
    {"id":1,"name":"Crypto Sue", "description":"Love Crypto in the Evening"}
];

    loadCustomers():Promise<any[]> {
      return of(this.CUSTOMERS).toPromise()
    }

这是模板：

<li *ngFor="let customer of loadCustomers() | async">
    <h3>{{customer.name}}</h3>
    <code> {{customer.description}} </code>
</li>
</ul>

想法？这是一个 stackblitz 演示：

https://stackblitz.com/edit/minimal-angular-ngfor-loop

我更新了演示以使用changeDetection: ChangeDetectionStrategy.OnPush，但它仍然会导致无限循环。也许这只能通过 observables 来完成？

Answer 1

问题在于变更检测。 因此，只要将第一个客户添加到 DOM，角度就会检测到更改并调用 loadCustomers()，这会导致无限循环。

更改检测到“OnPush”或绑定到属性而不是方法或 getter。