Angular+Firebase实时数据库：如何获取对象中Firstname与Lastname值

问题原因 #

你之前的操作错误在于把data.settings当成了数组来处理，但Firebase实时数据库返回的settings实际上是一个键值对对象（而非数组）。对象无法通过数组索引[0]访问，也没有forEach方法，所以才会出现报错。

解决方案 #

先通过console.log(data.settings)确认数据结构，Firebase返回的嵌套数据通常是类似这样的格式：

settings: {
  "-Nxxxxxxxxx": { Firstname: "张三", Lastname: "李四" },
  "-Nyyyyyyyyy": { Firstname: "王五", Lastname: "赵六" }
}

针对这种结构，你可以用以下方式提取Firstname和Lastname：

方式1：转为数组后遍历（推荐） #

用Object.values()把对象的值转为数组，再使用数组方法处理：

onRowClicked(data: any) {
  // 将settings对象的所有值转为数组
  const settingsItems = Object.values(data.settings);
  
  // 遍历数组获取每个项的姓名信息
  settingsItems.forEach(item => {
    console.log('Firstname:', item.Firstname);
    console.log('Lastname:', item.Lastname);
  });
}

方式2：直接取单个项（如果settings只有一条数据） #

如果settings里仅存在一组数据，可直接取转换后数组的第一个元素：

onRowClicked(data: any) {
  const settingsItems = Object.values(data.settings);
  if (settingsItems.length > 0) {
    const targetItem = settingsItems[0];
    console.log('Firstname:', targetItem.Firstname);
    console.log('Lastname:', targetItem.Lastname);
  }
}

方式3：遍历对象的键来访问 #

用Object.keys()获取对象的所有键，再通过键访问对应属性：

onRowClicked(data: any) {
  Object.keys(data.settings).forEach(key => {
    const item = data.settings[key];
    console.log('Firstname:', item.Firstname);
    console.log('Lastname:', item.Lastname);
  });
}

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