如何使用 Firebase 数据库以数组形式检索数据（TypeError：users.map 不是函数）

Question

我刚刚完成了 Angular 课程和几个 YouTube 教程，并且正在尝试制作自己的 Web 应用程序。我已成功将数据存储在 Firebase 中，现在我正在尝试检索它。但我有这个错误，我发现我没有检索数组。关于如何修复此错误有任何提示或建议吗？

类型错误：users.map 不是函数

这是我的服务

private baseUrl: string = 'https://registrationcrud-1164a-default-rtdb.asia-southeast1.firebasedatabase.app/registration.json';
private users: User[] = [];
usersChanged = new Subject<User[]>();
constructor( private http: HttpClient) { }
postRegistration(registerObj: User) {
  return this.http.post<User>(`${this.baseUrl}`, registerObj)
}

getRegisteredUser() {
  return this.http.get<User[]>(`${this.baseUrl}`)
  .pipe(
    map(users =>{
     return users.map(user =>{
      return{
        ...user,
        goals: user.goals ? user.goals: []
       };
     });
   }),
   tap(users =>{
     this.setUsers(users)
   })
  );
}

setUsers(users: User[]){
  this.users = users;
  this.usersChanged.next(this.users.slice());
}

我的组件：

ngOnInit() {
 this.getUsers()
    
}
getUsers(){

this.api.getRegisteredUser().subscribe(result => { 
  if (Array.isArray(result)) { 
    this.users = result; 
    this.dataSource = new MatTableDataSource(this.users); 
    this.dataSource.paginator = this.paginator; 
    this.dataSource.sort = this.matsort; 
  } else { 
    console.error("Received data is not an array:", result); 
  } 
}); 
}

Answer 1

收到的响应是一个对象而不是数组。您应该通过

Object.keys()

迭代键来转换为数组。

getRegisteredUser(): Observable<User[]> {
  return this.http.get<any>(`${this.baseUrl}`)
  .pipe(
    map((response: { [key: string]: any }) => {
     return Object.keys(response).map((k: string) => response[k])
       .map((user: any) => ({
         ...user,
         goals: user.goals ?? []
       }))
   }),
   tap(users =>{
     this.setUsers(users)
   })
  );
}