Итерация по Observable, содержащему массив с * ngFor в Angular

Question

У меня есть устройство, которое содержит несколько предметов. Теперь я хочу отобразить все элементы устройства в моем Angular приложении на странице HTML, но у меня возникают проблемы с повторением наблюдаемой, содержащей массив. Я получаю следующую ошибку с моим текущим кодом.

Ошибка: не удается найти другой объект поддержки [[объект]] типа «объект». NgFor поддерживает только привязку к итерациям, таким как массивы.

<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>;

Answer 1

Если ваша наблюдаемая модель излучает 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>

Answer 2

Отобразить устройство на items в файле ts (вам нужно будет обновить его вручную, если изменился ввод):

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

Answer 3

Ну *ngFor итерирует только по коллекции. Итак, что вам нужно сделать, чтобы создать subject, который содержит массив типов устройств и заполнить его данными.

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

и затем заполнить это устройство с такими данными -

this.device.next(data);