Angular 在包含以角度表示的*ngFor数组的可观察对象上迭代

我有一个包含多个项目的设备。现在我想在HTML页面上显示Angular应用程序中设备的所有项目，但在迭代包含数组的observable时遇到问题。我的当前代码出现以下错误

错误：找不到类型为“object”的不同支持对象“[object]”。NgFor只支持绑定到数组之类的可重用文件

{{item.name}
// ...

导出接口设备{
项目：设备项目[]；
}
@输入（）
公共设备：可观察；

好的

*ngFor

只在一个集合上迭代。因此，您必须创建一个

主题

，其中包含您的设备类型数组并在其上填充数据

public device : Subject<Device[]> = new Subject();

---

如果您的可观测设备发出您描述的

设备

模型（而不是

设备

阵列）：

导出接口设备{
项目：设备项目[]；
}
公共设备$：可观察；

在上面的代码中，我建议您使用约定的

设备$

（一个

$

符号作为后缀来区分

可观察的

和常规类型）

您的模板代码应为：

{{item.name}
// ...

或

{{item.name}
...

将设备映射到ts文件中的

项

（如果输入发生更改，则需要手动更新）：

导出接口设备{
项目：设备项目[]；
}
@输入（）
公共设备：可观察；
公共项目$=device.pipe（映射（x=>x.items））；

然后像平常一样使用它：

<tr *ngFor="let item of items$">
<td>{{ item.name }}</td>
// ...

{{item.name}
// ...

public device : Subject<Device[]> = new Subject();

this.device.next(data);

export interface Device {
  items: DeviceItem[];
}

@Input()
public device: Observable<Device>;
public items$ = device.pipe(map(x => x.items));

<tr *ngFor="let item of items$">
<td>{{ item.name }}</td>
// ...