Повторяющееся обещание с * ngFor?

Question

Получение бесконечной l oop попытки перебрать обещание, полученное в результате вызова этой функции:

 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>

Мысли? Это демонстрация стекаблиц:

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

Я обновил демо, чтобы использовать changeDetection: ChangeDetectionStrategy.OnPush, но это все равно приводит к бесконечному l oop. Возможно, это можно сделать только с помощью наблюдаемых?

Answer 1

Проблема в обнаружении изменений. Поэтому, как только первый клиент добавляется в DOM, angular обнаруживает изменение и вызывает loadCustomers (), что приводит к бесконечному l oop.

. Или измените обнаружение на «OnPu sh» или привязка к свойству вместо метода или метода получения.