Firebase Angular nested tree view

I have a dataset that looks like this inside of Firebase. Its basically a hierchical view of categories:

In my angular app, my template looks like this:

 <ul>
  <li class="text" *ngFor="let item of items | async">
    <input [(ngModel)]="item.name">
    <button (click)="updateItemFromList(item.$key, item.name)">Update</button>
    <button (click)="removeItemFromList(item.$key)">Delete</button>
    <button (click)="addChildCategory2(item.$key, item)">Add Child Category</button>

    <ul>
        <li *ngFor="let childCategory of item.children">
            <input [(ngModel)]="childCategory.name">
        </li>
    </ul>
.....

Here is how I’m loading items:

export class AppComponent {
  title = 'My App';
  db: any;
  items: FirebaseListObservable<any[]>;
  wikis: FirebaseListObservable<any[]>;
  newCategory: any;
  path: string;

  constructor(db: AngularFireDatabase) {
    this.db = db;
    this.path = '/wikis/-KuMvBGL3XpPGxjMLPDK/data';
    this.items = db.list(this.path);

  }

The nested loop (let childCategory of item.children) is throwing this error:
AppComponent.html:17 ERROR Error: Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays.

I understand the the nested list of sub categories is not an array, but how to I fix this? Do I need to make a changes to the data in Firebase or can I change template to work with a list of objects?

Source: AngularJS

from Angular Questions https://angularquestions.com/2017/09/26/firebase-angular-nested-tree-view/
via @lzomedia #developer #freelance #web