What is wrong with my NgFor? Only supports binding to Iterables such as Arrays

Question

I have been working on a project with Angular. But my project doesn't work like it should. I get the error "ERROR Error: Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays." in the console of my page.

On my page I get the "This works" but that's it. Meanwhile I should also see the 'soort' of my 'dier'.

In my html:

    <p>This works</p>
    <div
    class="dier"
    *ngFor="let dier of dieren$"> 
    <p>{{dier.soort}}</p>
   </div>

The component (without imports and @Component):

   export class DierListComponent implements OnInit {
  private _fetchdieren$: Observable<Dier[]>; // = this._dierDataService.dieren$;
  public errorMessage: string = '';

  constructor(private _dierDataService: DierDataService) {
   }

  get dieren$(): Observable<Dier[]>{
   return this._fetchdieren$;
  }

  addNiewDier(dier){
    this._dierDataService.addNewDier(dier); 
  }

  ngOnInit(): void {
    this._fetchdieren$ = this._dierDataService.dieren$.pipe(
      catchError(err => {
        this.errorMessage = err;
        return EMPTY;
      })
    );
  }
}

And the dataservice (without imports, @injectable and some (unimportant methods):

export class DierDataService {
  private _dieren$ = new BehaviorSubject<Dier[]>([]);
  private _dieren: Dier[];

  constructor(private http: HttpClient) { 
    this.dieren$.subscribe((dieren: Dier[]) => {
      this._dieren = dieren;
      this._dieren$.next(this._dieren);
    });
  }
 /* get allDieren$(): Observable<Dier[]> {
    return this._dieren$;
  }*/

  get dieren$(): Observable<Dier[]>{ 
    return this.http.get(`${environment.apiUrl}/Dieren`).pipe(
      catchError(this.handleError),
      tap(console.log),
      map(
        (list: any[]): Dier[] => list.map(Dier.fromJSON)              
      )
    );
  }

  handleError(err: any): Observable<never> {
    let errorMessage: string;
    if (err instanceof HttpErrorResponse) {
      errorMessage = `'${err.status} ${err.statusText}' when accessing '${err.url}'`;
    } else {
      errorMessage = `an unknown error occurred ${err}`;
    }
    console.error(err);
    return throwError(errorMessage);
  }
}

Can Anyone please help me? I have been stuck on this for days now. Thank you!

From your title it seems like you know what the problem is no? dieren$ in your *ngFor needs to be an iterable eg an array. I can't really tell what's going on but it looks like dieren$ is an observable? — kebab-case
Usually, when using *ngFor with an observable, you use the async pipe. Like so: *ngFor="let dier of dieren$ | async" — R. Richards
@R.Richards Thank you so much! I'm still learning Angular so I didn't know. I used the let dier of (dieren$ | async) and now it works. — Kelsey Verdickt
@R.Richards could you write this as a post so I can upvote and mark it as answered? Thank you again! — Kelsey Verdickt

R. Richards R. Richards · Accepted Answer · 2020-05-20T11:03:16

When using *ngFor with an observable, you need to use the async pipe.

Like so: *ngFor="let dier of dieren$ | async"

Async Pipe Docs

From the docs:

The async pipe subscribes to an Observable or Promise and returns the latest value it has emitted. When a new value is emitted, the async pipe marks the component to be checked for changes. When the component gets destroyed, the async pipe unsubscribes automatically to avoid potential memory leaks.

What is wrong with my NgFor? Only supports binding to Iterables such as Arrays

1 Answers