труба asyn c не работает на rx js от наблюдаемой

Question

Я хочу использовать asyn c трубу на простой наблюдаемой, возвращаемой из:

в component.ts

 myData$ = from([
    { name: "Los Angeles", population: "3.9 million" },
    { name: "New York", population: "8,4 million" },
    { name: "Chicago", population: "2.7 million" },
  ]);

в компоненте. html

<ul>
    <li *ngFor="let city of myData$ | async">
      {{city}}
    </li>
  </ul>

Ошибка, которую я получаю:

Ошибка: ошибка: не удается найти другой объект поддержки [[объект]] типа 'Chica go'. NgFor поддерживает только привязку к итерациям, таким как массивы.

Answer 1

Посмотрите на тип myData$. Это будет Observable<{ name:string, population }>, однако ngFor не будет работать таким образом, ему нужен массив, поэтому вы должны передать тип Observable<{ name:string, population }[]> в asyn c pipe и ngFor будет работать.

Вот почему вам нужно использовать of() вместо from()

Answer 2

Если вы используете оператор from, вы будете получать каждый элемент массива один за другим, а не весь массив. Поэтому измените оператор from на of, чтобы вы получали весь массив и l oop поверх него.

myData$ = of([
    { name: "Los Angeles", population: "3.9 million" },
    { name: "New York", population: "8,4 million" },
    { name: "Chicago", population: "2.7 million" },
  ]);

<ul>
  <li *ngFor="let city of myData$ | async">
    {{ city | json }}
  </li>
</ul>