InvalidPipeArgument:管道“ AsyncPipe”的“ [object Object]”,但控制台提供了Observable吗?

时间:2018-11-02 20:12:57

标签: javascript angular typescript google-cloud-firestore

我对firebase和rxjs还是很陌生,但这仍然没有引起我的注意:

我通过服务对Firestore数据库进行简单查询

chat.service.ts:

null

chat.component.ts:

chatsCollection: AngularFirestoreCollection<Chat>;
  chats: Observable<Chat[]>;

  constructor(private db: AngularFirestore) {
  }

  getChats(): Observable<Chat[]> {
    this.chatsCollection = this.db.collection('chats');
    return this.chatsCollection.valueChanges();
  }

chat.component.html:

  chats: Observable<Chat[]>;
  constructor(private router: Router, public chatService: ChatService) { }

  ngOnInit() {
    this.chats = this.chatService.getChats();
    console.log(this.chats);
  }

现在的问题是异步管道为获取对象而不是可观察对象引发了错误,但是我之前记录了日志,并说这是可观察的?另外,如果我订阅(用于测试),它会返回我想要的值。

data

Console Output

谢谢您的帮助!

使用的版本:

rxjs:6.3.3 角度7 火力:5.5.6

1 个答案:

答案 0 :(得分:2)

问题是在垫选择列表上的#chats。它正在覆盖模板中的组件chats变量。将那个重命名为其他名称,您就可以开始使用了。

<mat-selection-list #chatList>