在 Angular 中迭代包含带有 *ngFor 的数组的 Observable答案

【问题标题】：Iterating over Observable that contains an Array with *ngFor in Angular在 Angular 中迭代包含带有 *ngFor 的数组的 Observable
【发布时间】：2020-07-02 09:32:57
【问题描述】：

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

错误：找不到“object”类型的不同支持对象“[object Object]”。 NgFor 只支持绑定到 Arrays 等 Iterables。

<tbody *ngFor="let item of (device | async).itemMap">
  <tr>
    <td>{{ item.name }}</td>
    // ...
  </tr>
</tbody>

export interface Device {
  items: DeviceItem[];
}

@Input()
public device: Observable<Device>;

【问题讨论】：

标签： angular typescript

【解决方案1】：

*ngFor 仅在集合上进行迭代。因此，您必须创建一个包含您的设备类型数组的 subject 并在其上填充数据。

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

然后用这样的数据填充这个设备 -

this.device.next(data);

【讨论】：

【解决方案2】：

如果您的 observable 发出您所描述的 Device 模型（而不是 Device 的数组）：

export interface Device {
  items: DeviceItem[];
}

public device$: Observable<Device>;

在上面的代码中，我建议您使用约定 device$（$ 符号作为后缀来区分 Observable 和常规类型）。

你的模板代码应该是：

  <tr *ngFor="let item of (device$ | async).items">
    <td>{{ item.name }}</td>
    // ...
  </tr>

或

  <ng-container *ngIf="device$ | async as device">
    <table>
      <tr *ngFor="let item of device.items">
        <td>{{ item.name }}</td>
        ...
      </tr>
    </table>
  </ng-container>

【讨论】：

【解决方案3】：

将设备映射到 ts 文件中的items（如果输入发生更改，您需要手动更新它）：

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>
// ...

【讨论】：