可观察数组* ngFor指令Angular

Question

我陷入“错误错误：找不到类型为'object'的其他支持对象'[object Object]'。NgFor仅支持绑定到Iterables，例如数组。”

我试图建立一个购物篮存储来向我的购物篮页面提供数据。

为我服务：

nourritureArrayTest: Nourriture[] = [];
getNourriturePanier(): Observable<Nourriture[]> {
  return of(this.nourritureArrayTest)
}

在我的购物篮页面ts中：

nourriturePanierTest: Observable<Nourriture[]>
ngOnInit() {
  this.nourriturePanierTest= this.panierService.getNourriturePanier()
}

nourritureArrayTest是类型为Object的数组

在我的Basket.html中

<div *ngFor="let extra of nourriturePanierTest | async">
<p>{{extra.name}}</p></div>

Answer 1

nourriturePanierTest是可观察的。 您需要将此可观察对象存储在某个数组中，然后在ngFor中使用该数组。

ngFor仅适用于Array。

我添加了一些代码来为您提供帮助。

nourriturePanierTest: Nourriture[];
ngOnInit() {
this.nourriturePanierTest= this.panierService.getNourriturePanier().subscribe(res=>{
this.nourriturePanierTest= res })
}

Answer 2

您必须订阅可观察对象，而不是将其分配给变量：

ngOnInit() {
  this.panierService.getNourriturePanier().subscribe(res=>{
    this.nourriturePanierTest= res
  })
}

如果this.nourritureArrayTest是一个数组，它将起作用