*ngFor in *ngFor on firebase 数据库答案

【问题标题】：*ngFor in *ngFor on firebase database*ngFor in *ngFor on firebase 数据库
【发布时间】：2019-09-17 23:15:19
【问题描述】：

我使用 firebase 数据库和 AngularFireDatabase。我无法在 *ngFor 中显示变量的值，这个 *ngFor 在其他 *ngFor 中。

    constructor(private db: AngularFireDatabase) {
    db.list('/devices/').snapshotChanges().pipe(map(changes => { 
        return changes.map(c => ({ key: c.payload.key, ...c.payload.val() })) }))
        .subscribe(o => { this.devices = o });
  }


    <div *ngFor="let d of db.devices;">
    <h4>{{d.name}}</h4>
    <div *ngFor="let s of d.sensors;">
    <p>Sensor value: {{s.value}}</p>
    </div>
    </div>

错误错误：找不到类型为“object”的不同支持对象“[object Object]”。 NgFor 只支持绑定到 Arrays 等 Iterables。

【问题讨论】：

嘿。该错误已经表明db.devices 或d.sensors 不是array，而是object。 *ngFor 仅适用于数组。
在另一个 *ngFor 中使用 *ngFor 是可能的，因此您的模板逻辑看起来是正确的。 “d.sensors”需要是一个数组，我猜它不是。你可以在你的 subscribe() 中控制台记录“this.devices”，看看你得到了什么？
您可以在循环之外执行以下操作并显示响应：{{d.sensors | json}}

标签： angular firebase-realtime-database angularfire2

【解决方案1】：

*ngFor，与任何for 循环一样，只能在Iterables 上运行。发生错误是因为您尝试在不可迭代的对象上运行。

尝试打印您的对象并查看它们是否是可迭代对象

【讨论】：

那么，如何使用db.devices来显示孩子的价值观呢？