How to fix Error: NG0901 in Angular

I got this error looping over items in Angular:

<li *ngFor="let child of children">

Solution

NgFor only supports binding to Iterables such as Arrays. If you want to iterate over an object, you can make use of KeyValuePipe which

Transforms Object or Map into an array of key value pairs.

So, It seems children was an object instead of an array. I created a pipe for this:

import {Pipe, PipeTransform} from "@angular/core";

@Pipe({
  name: 'ArrayFix',
  pure: true
})

export class ArrayFixPipe implements PipeTransform {

  transform(objectOrArray: any): any[] {
    if (!objectOrArray) {
      return [];
    } else {
      return this.ArrayFix(objectOrArray);
    }
  }

  ArrayFix(objectOrArray: any): any {
    return Array.isArray(objectOrArray) ? objectOrArray : [objectOrArray];
  }
}

This transforms my object into an array. Then I added the pipe to the loop:

<li *ngFor="let child of children | Arrayfix">