异步管道在observable中的rxjs上不起作用

Question

我想对从返回的简单可观察对象使用异步管道

在组件中.ts

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

在component.html 中

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

我得到的错误：

错误：找不到类型为"Chicago"的不同支持对象"[object object]"。NgFor只支持绑定到数组等可伸缩对象。

Answer 1

如果使用from运算符，将逐个接收每个数组项，而不是整个数组。因此，将from运算符更改为of，这样您将接收整个阵列并在其上循环

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

看看myData$的类型。它将是Observable<{ name:string, population }>，但ngFor不会以这种方式工作，它需要数组，所以您应该将Observable<{ name:string, population }[]>类型传递给异步管道，ngFor就会工作。

这就是为什么您需要使用of()而不是from()