使用Angular HttpClient从Firebase实时数据库获取无键数据求助

我来帮你搞定这个问题！Firebase实时数据库返回带键的对象是正常行为——它靠这些唯一键来管理每个用户节点。要转成不含键的对象数组，我们只需要在Service里对返回的数据做一点点处理就行。

1. 修改Service中的数据处理逻辑 #

首先注意：Angular 6+ 配合 RxJS 6+ 之后，操作符需要通过 pipe() 调用，而且要从 rxjs/operators 导入 map。我们可以用 Object.values() 方法直接把带键对象的所有值提取成数组，同时处理数据为空的情况避免报错。

修改后的Service代码：

// 先导入必要模块
import { HttpClient } from '@angular/common/http';
import { map } from 'rxjs/operators';

// ... 其他服务代码 ...

getUsers() {
  return this.http.get(`${this.fireBase}/users.json`).pipe(
    map(res => {
      // 处理数据库中users节点为空的情况，返回空数组
      if (!res) {
        return [];
      }
      // Object.values()会把对象的所有值转换为纯数组
      return Object.values(res);
    })
  );
}

2. 在Component中接收并使用数组 #

在Component里，我们可以直接订阅这个Observable，拿到的就是已经处理好的无键对象数组了：

// 先定义数组存储用户数据
users: any[] = [];

getUsers() {
  this.getWeather.getUsers().subscribe(
    (response: any[]) => {
      this.users = response;
      console.log("处理后的用户数组：", this.users);
    }, 
    err => console.error("获取数据出错：", err)
  );
}

为什么之前推入数组失败？ #

你之前尝试推入数组失败，大概率是因为直接把整个带键的对象往数组里push，或者没有正确遍历对象的属性值。现在用 Object.values() 一步就能把所有用户对象提取成数组，不用手动遍历啦。

如果之后你需要保留Firebase的节点键（比如用来做更新/删除操作），也可以用 Object.entries() 把键和值一起转成数组，示例如下：

map(res => {
  if (!res) return [];
  return Object.entries(res).map(([key, value]) => ({
    id: key,
    ...value
  }));
})

这样得到的数组每个元素都会包含id字段（即Firebase的节点键）和用户的其他数据。

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