从可观察对象数组迭代 *ngFor 时如何修复 InvalidPipeArgument 错误
How to fix InvalidPipeArgument error when iterate *ngFor from Observable Array of Objects
尝试从对象的可观察数组迭代 *ngFor 时出现错误
我用Angular8
聊天消息服务
private chatMessages = [];
private chatMessagesStream = new BehaviorSubject(this.chatMessages);
getMessages(): Observable<any> {
return this.chatMessagesStream.asObservable();
}
addMessage(chatMessage) {
this.chatMessages.push(chatMessage);
this.chatMessagesStream.next(this.chatMessages);
}
聊天视图组件
private chatMessages:Observable<Array<any>>;
constructor(
private chatMessagesService: ChatMessagesService) {
}
ngAfterViewInit() {
this.chatMessagesService.getMessages().subscribe(messages => {
this.chatMessages = messages;
this.scrollMessagesToBottom(true);
});
}
聊天HTML模板
<div class="row conpeek_message_chat_row" *ngFor="let chatMessage of chatMessages | async ">
...
</div>
初始化组件后,我在控制台中遇到问题,可能是哪里出了问题?
ERROR Error: InvalidPipeArgument: '[object Object]' for pipe 'AsyncPipe'
删除异步管道
由于chatMessages
不可观察,它包含纯值。
this.chatMessagesService.getMessages().subscribe(messages => {
this.chatMessages = messages; // <------- HERE , you are assigning value
this.scrollMessagesToBottom(true);
});
如果你想保持异步管道,你必须用observable
分配chatMessages
,像这样:
this.chatMessages = this.chatMessagesService.getMessages();
尝试从对象的可观察数组迭代 *ngFor 时出现错误
我用Angular8
聊天消息服务
private chatMessages = [];
private chatMessagesStream = new BehaviorSubject(this.chatMessages);
getMessages(): Observable<any> {
return this.chatMessagesStream.asObservable();
}
addMessage(chatMessage) {
this.chatMessages.push(chatMessage);
this.chatMessagesStream.next(this.chatMessages);
}
聊天视图组件
private chatMessages:Observable<Array<any>>;
constructor(
private chatMessagesService: ChatMessagesService) {
}
ngAfterViewInit() {
this.chatMessagesService.getMessages().subscribe(messages => {
this.chatMessages = messages;
this.scrollMessagesToBottom(true);
});
}
聊天HTML模板
<div class="row conpeek_message_chat_row" *ngFor="let chatMessage of chatMessages | async ">
...
</div>
初始化组件后,我在控制台中遇到问题,可能是哪里出了问题?
ERROR Error: InvalidPipeArgument: '[object Object]' for pipe 'AsyncPipe'
删除异步管道
由于chatMessages
不可观察,它包含纯值。
this.chatMessagesService.getMessages().subscribe(messages => {
this.chatMessages = messages; // <------- HERE , you are assigning value
this.scrollMessagesToBottom(true);
});
如果你想保持异步管道,你必须用observable
分配chatMessages
,像这样:
this.chatMessages = this.chatMessagesService.getMessages();