async pipe does not work on rxjs from observable

Question

I want to use async pipe on a simple observable returned by from:

in component.ts

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

in component.html

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

Error that I get:

ERROR Error: Cannot find a differ supporting object '[object Object]' of type 'Chicago'. NgFor only supports binding to Iterables such as Arrays.

Answer 1

If you are using from operator, you will be receiving each array items one by one, instead of the entire array. So change the from operator to of so you will be receiving the entire array and loop over it.

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>

Answer 2

Have a look at the type of myData$. It will be Observable<{ name:string, population }>, however ngFor won't work that way, it needs array, thus you should pass type of Observable<{ name:string, population }[]> to async pipe and ngFor will work.

That's why you need to use of() instead of from()