ngfor ngfor angularfire2 angular5

Question

在开始之前，我需要强调的是我对角度和角度火力都是新手（不断学习） -

我的firebase数据库如下所示：

我可以访问订单详细信息并将它们绑定在html中，但我不完全确定如何将Items转换为可迭代的数组，然后我可以使用第二个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 nested *ngFor Array within Array... but Firebase doesn't have arrays...?

但我不知道解决方案对我来说是什么样的，因为我已经使用.map（）来返回订单的密钥。我用order.key作为更新订单状态的方法的输入，所以我需要按原样工作。

我知道我必须对我在这里粘贴的.ts代码部分做一些事情，但不知道从哪里开始。

尽管我想要一个复制粘贴解决方案，但我非常感谢解释为什么建议的解决方案可行，更多的是我可以了解原因而不是什么。

我使用的是AngularFire 2.3.0和Angular 5.0.0

Answer 1

我有一个解决方案，但可能不是最好或最有效的。

我将以下内容添加到我的.ts文件

  generateArray(obj){
    return Object.keys(obj).map((key)=>{ return obj[key]});
  }

并将我的.html中的order.Items项更改为：

  *ngFor="let item of generateArray(order.Items)"