*ngFor in *ngFor on firebase 数据库

Posted 2023-03-13

【中文标题】*ngFor in *ngFor on firebase 数据库

【英文标题】：*ngFor in *ngFor on firebase database

【发布时间】：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

【参考方案1】：

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

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

【讨论】：

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