Angular中AsyncPipe报无效参数错误，请求技术支持

嘿，我刚碰到过一模一样的问题，咱们来快速定位并解决它～

错误原因分析 #

你看到的这个错误，本质是AsyncPipe只能处理Observable或Promise类型的数据，但你的postService.postsStream返回的是AngularFireList<Post>——这是Firebase数据库的列表引用对象，不是可观察流。AsyncPipe拿到这个对象后不知道怎么解析，就抛出了[object Object]的错误提示。

看你的PostService.ts就能发现问题：你明明定义了_postsStream这个Observable<Post[]>变量，但完全没用到，反而把数据库引用_postsStreamRef直接返回给了组件。

一步到位的解决方案 #

修改你的PostService，让postsStream返回真正的Observable<Post[]>：

1. 基础版（只获取数据）

import { Author } from '../models/author'; 
import { Observable } from 'rxjs'; // 别忘了导入Observable

@Injectable() 
export class PostService { 
  readonly postsPath = "posts"; 
  private _postsStreamRef: AngularFireList<Post>; 
  private _postsStream: Observable<Post[]>; 

  constructor(private db: AngularFireDatabase, private authorService: AuthorService) { 
    this._postsStreamRef = this.db.list(this.postsPath);
    // 调用valueChanges()获取数据的可观察流
    this._postsStream = this._postsStreamRef.valueChanges();
  } 

  // 修改getter，返回Observable类型
  get postsStream(): Observable<Post[]> { 
    return this._postsStream; 
  } 

  add(post: Post) { 
    this._postsStreamRef.push(post); 
  } 
}

2. 进阶版（需要Firebase节点ID）

如果你需要每个帖子的Firebase节点key（比如用来做删除/更新操作），可以用snapshotChanges()并通过map操作符处理数据：

import { Author } from '../models/author'; 
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators'; // 导入map操作符

@Injectable() 
export class PostService { 
  readonly postsPath = "posts"; 
  private _postsStreamRef: AngularFireList<Post>; 
  private _postsStream: Observable<(Post & { key: string })[]>; 

  constructor(private db: AngularFireDatabase, private authorService: AuthorService) { 
    this._postsStreamRef = this.db.list(this.postsPath);
    // 解析snapshotChanges，把key和数据合并
    this._postsStream = this._postsStreamRef.snapshotChanges().pipe(
      map(changes => 
        changes.map(c => ({ 
          key: c.payload.key, 
          ...c.payload.val() as Post 
        }))
      )
    );
  } 

  get postsStream(): Observable<(Post & { key: string })[]> { 
    return this._postsStream; 
  } 

  add(post: Post) { 
    this._postsStreamRef.push(post); 
  } 
}

最后检查 #

修改完服务后，你的HTML代码不需要改动——async pipe现在能正确识别postsStream返回的Observable，自动订阅并输出数组，reverse pipe也能正常处理数组数据了。

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