Angular嵌套*ngFor遍历Firebase数据报错：仅支持数组等可迭代对象

这个报错的核心原因很明确：你的d.sensors是一个JavaScript键值对对象，而*ngFor只能遍历数组这类可迭代集合。Firebase实时数据库默认会把列表数据存储为对象（用自动生成的唯一键作为属性名），这就是触发错误的根源。

下面给你几个可行的解决方案：

方案一：在组件中提前将对象转换为数组（推荐） #

在订阅数据流时，就把每个设备的sensors对象转换成数组，让模板可以直接用*ngFor遍历：

constructor(private db: AngularFireDatabase) { 
  db.list('/devices/').snapshotChanges().pipe(
    map(changes => {
      return changes.map(c => {
        const deviceData = c.payload.val() as { name: string, sensors: Record<string, { value: any }> };
        // 将sensors对象转换为数组，只取值用Object.values
        const sensorsArray = Object.values(deviceData.sensors || {});
        
        // 如果需要保留Firebase生成的传感器唯一key，可改成：
        // const sensorsArray = Object.entries(deviceData.sensors || {}).map(([key, val]) => ({ sensorId: key, ...val }));
        
        return { 
          key: c.payload.key, 
          ...deviceData,
          sensors: sensorsArray
        };
      });
    })
  ).subscribe(devices => { 
    this.devices = devices; 
  }); 
}

同时修正模板里的小错误：你之前写的是db.devices，但组件里赋值的是this.devices，模板应直接用devices：

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

方案二：在模板中直接转换（不推荐，模板应尽量避免逻辑） #

如果不想修改组件代码，可以在模板里用Object.values()直接转换，但需要先在组件中把Object暴露给模板：

在组件类里添加一行：

Object = Object; // 让模板可以访问全局的Object对象

然后修改模板：

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

补充：Firebase数据结构的最佳实践 #

Firebase不推荐用数组存储列表数据（删除元素后会留下索引空洞，导致数据不一致），推荐的列表结构是用push()生成的唯一键作为对象属性，比如你的数据结构应该是这样的：

devices
  ├─ device1Key
  │  ├─ name: "Device 1"
  │  └─ sensors
  │     ├─ sensor1Key: { value: 25 }
  │     └─ sensor2Key: { value: 30 }
  └─ device2Key
     ├─ name: "Device 2"
     └─ sensors
        └─ sensor3Key: { value: 22 }

这种结构下，用Object.values()转换为数组完全适配，也符合Firebase的设计思路。

内容的提问来源于stack exchange，提问作者DEV R