Looping through Observable with an Array using *ngFor in Angular

Question

Looping through Observable with an Array using *ngFor in Angular

My Angular App is having trouble displaying all the items of a device due to issues with iterating through an observable array. The error message I am currently encountering is as follows:

Error: Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays.

<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

Answer 1

Answer №1

If your observable is emitting a single Device model, not an array of Device:

export interface Device {
  items: DeviceItem[];
}

public device$: Observable<Device>;

In the provided code snippet, it is advisable to follow the convention of using a $ symbol as a suffix for observables like device$.

Your template code should be:

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

Alternatively,

  <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

If your observable is emitting a single Device model, not an array of Device:

export interface Device {
  items: DeviceItem[];
}

public device$: Observable<Device>;

In the provided code snippet, it is advisable to follow the convention of using a $ symbol as a suffix for observables like device$.

Your template code should be:

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

Alternatively,

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

Answer 3

Answer №2

When using *ngFor, it will iterate only over a collection. To make this work, you need to create a subject that contains your device type array and fill the data into it.

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

You can then populate this 'devices' subject with data like so -

this.devices.next(data);

Answer 4

When using *ngFor, it will iterate only over a collection. To make this work, you need to create a subject that contains your device type array and fill the data into it.

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

You can then populate this 'devices' subject with data like so -

this.devices.next(data);

Answer 5

Answer №3

Assign the mapping of the device to items in the TypeScript file (manual updates required if input changes):

export interface Device {
  items: DeviceItem[];
}

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

Then proceed to use it as you normally would:

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

Answer 6

Assign the mapping of the device to items in the TypeScript file (manual updates required if input changes):

export interface Device {
  items: DeviceItem[];
}

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

Then proceed to use it as you normally would:

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

Looping through Observable with an Array using *ngFor in Angular

Answer №1

Answer №2

Answer №3

Similar questions

Incorrectly aligned highlighted labels are appearing on the Kendo chart category axis item labels

Managing Observable<Person[]> in ng-bootstrap typeahead instead of Observable<string[]>: a complete guide

Unsure about the commit hash referenced in the tsd.json file

Weighing the importance of a multiple-choice quiz

Currently in motion post file selection

When a URL is entered, information is not retrieved from the database

Having trouble monitoring button clicks with Jest and React Testing Library while testing a component scenario

Utilizing combinedReducers will not prompt a re-render when dispatching actions

Having trouble accessing multiple items in JSON format using AsyncStorage in React Native

Typescript compiler still processing lib files despite setting 'skipLibCheck' to true

Library for injecting dependencies - changing the names of injected variables

What is the best way to remove all selected items in a dropdown menu?

What is the best way to apply a basic filter to an ion-list in an Ionic 4 application?

Incorporate the latest value into an array of objects using JavaScript, taking into account its frequency

Issue with Bot framework (v4) where prompting choice in carousel using HeroCards does not progress to the next step

The component fails to load on the designated router outlet

What is the rationale behind Typescript permitting the assignment of an "any" object type to a class object?

Storing data locally in Angular applications within the client-side environment

What is the best way to develop a function that can take in either a promise or a value and output the same type as the input parameter?

Tips for retaining scroll position in Angular 2