Angular Firebase使用Async Pipe报错：InvalidPipeArgument问题求助

嘿，我刚好踩过这个坑，马上给你捋清楚怎么解决！

你碰到的ERROR Error: InvalidPipeArgument: '[object Object]'，核心原因是Async Pipe只能处理Observable、Promise这类异步数据流，而你当前定义的user$是AngularFireList<any>类型——这其实是Firebase的列表引用对象，不是直接的异步数据流，Async Pipe根本不知道怎么解析它，所以才报了这个错。

第一步：修正组件代码，把引用转为Observable #

AngularFireList提供了两个方法来获取可订阅的数据流：

• valueChanges()：只返回纯数据，适合只需要展示内容的场景
• snapshotChanges()：返回包含数据+元数据（比如节点key）的对象，适合需要修改/删除数据的场景

先给最基础的修改方案：

// 把类型改为Observable<any[]>，明确是异步数据流
user$: Observable<any[]>; 

constructor(db: AngularFireDatabase) {
  // 调用valueChanges()，把AngularFireList转为Async Pipe能识别的Observable
  this.user$ = db.list("/users").valueChanges(); 
}

第二步：在模板中正确结合Async Pipe使用 #

现在user$已经是Observable了，就可以在*ngFor里正常使用Async Pipe了：

<ul>
  <!-- 用async pipe自动订阅/取消订阅Observable，无需手动管理 -->
  <li *ngFor="let user of user$ | async">
    {{ user }}
  </li>
</ul>

额外优化：过滤数据库里的null值 #

看你的数据库结构，users数组里有个null元素，你可以选择在模板或组件里过滤掉：

模板内快速过滤：

<ul>
  <li *ngFor="let user of user$ | async" *ngIf="user">
    {{ user }}
  </li>
</ul>

组件内用RxJS优雅过滤：

import { map } from 'rxjs/operators';

// ...

user$: Observable<any[]>; 

constructor(db: AngularFireDatabase) {
  this.user$ = db.list("/users").valueChanges().pipe(
    // 过滤掉数组中的null元素
    map(users => users.filter(user => user !== null))
  );
}

这样就能完美解决你的报错啦！

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