我对firebase和rxjs还是很陌生,但这仍然没有引起我的注意:
我通过服务对Firestore数据库进行简单查询
chat.service.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.ts:
chats: Observable<Chat[]>;
constructor(private router: Router, public chatService: ChatService) { }
ngOnInit() {
this.chats = this.chatService.getChats();
console.log(this.chats);
}
chat.component.html:
<mat-card class="example-card">
<mat-card-header>
<mat-card-title>Your Chats</mat-card-title>
</mat-card-header>
<mat-card-content>
<mat-selection-list #chats>
<h3 mat-subheader>Chats</h3>
<mat-list-option *ngFor="let chat of (chats | async)" (click)="handleClick(chats)" [value]="chat.id">
<img matListAvatar src="./assets/avatar.svg" alt="Avatar Icon">
<h3 mat-line>{{chat.name}}</h3>
<p mat-line>test</p>
</mat-list-option>
</mat-selection-list>
</mat-card-content>
</mat-card>
现在的问题是异步管道为获取对象而不是可观察对象引发了错误,但是我之前记录了日志,并说这是可观察的?另外,如果我订阅(用于测试),它会返回我想要的值。
预先感谢您的帮助!
使用的版本:
rxjs:6.3.3
角度7
火力:5.5.6
最佳答案
问题是垫选择列表上的#chats
。它正在覆盖模板中的组件chats
变量。将该名称重命名为其他名称,您就很好了。
<mat-selection-list #chatList>
关于javascript - InvalidPipeArgument:管道“AsyncPipe”的“[object Object]”,但控制台提供了Observable吗?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/53125258/