ngfor в ngfor angularfire2 angular5

Прежде чем я начну, я должен подчеркнуть, что я новичок как в angular, так и в angularfire (постоянно учусь) -

Моя база данных firebase выглядит так:

Я могу получить доступ к деталям заказа и связать их в html, но я не совсем уверен, как преобразовать элементы в повторяемый массив, который затем я могу использовать во втором ngfor.

Мой html-файл выглядит примерно так:

       <ng-container *ngFor="let order of orders$ | async ">
        <ng-container *ngFor="let item of order.Items">
         <ng-container *ngIf="order['Order Status'] == 0 ">

         ... Display stuff using {{ item.Item }} {{ item.Quantity }}

Мой конструктор в файле .ts выглядит примерно так:

  constructor(afDb: AngularFireDatabase) {

   this.orders$ = afDb.list<any>('data/shop', ref => ref.orderByChild('ETA')).snapshotChanges().map(
    changes => {
      return changes.map(
        c => ({ key: c.payload.key, ...c.payload.val() })
      );
    }
  );
 }

Я просмотрел другие вопросы и ответы, такие как здесь: AngularFire2 вложил *ngFor Array в массив... но в Firebase нет массивов...?

но я понятия не имею, как будет выглядеть решение для меня, поскольку я уже использую .map() для возврата ключа заказов. Я использую order.key в качестве входных данных для метода, который обновляет статус заказа, поэтому мне нужно, чтобы это работало как есть.

Я знаю, что мне нужно что-то сделать с той частью кода .ts, которую я вставил сюда, но не знаю, с чего начать.

Как бы мне ни хотелось получить решение для копирования и вставки, я был бы очень признателен за объяснение того, почему предлагаемое решение будет работать, тем более, чтобы я мог узнать, почему, а не что.

Я использую AngularFire 2.3.0 и Angular 5.0.0.