1

在开始之前，我需要强调我对 angular 和 angularfire 都是新手（不断学习）-

我的 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

4

1 回答 1

2

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

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

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

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

  *ngFor="let item of generateArray(order.Items)"
于 2017-11-16T20:26:00.277 回答