时间戳

首页 > 解决方案 > 可观察数组 *ngFor 指令 Angular

angular - 可观察数组 *ngFor 指令 Angular

问题描述

我遇到了“错误错误：找不到类型为'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 是类型对象的数组

在我的 Basket.html 中

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

标签： angularobservable

解决方案

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

ngFor 仅适用于 Array。

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

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

推荐阅读