从对象的可观察数组迭代* ngFor时如何修复InvalidPipeArgument错误 [英] How to fix InvalidPipeArgument error when iterate *ngFor from Observable Array of Objects

问题描述

尝试从对象的可观察数组迭代* ngFor时出现错误

I have an error when try to iterate *ngFor from Observable Array of Objects

我使用Angular 8

I use Angular 8

聊天消息服务

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>

在初始化组件之后，我在控制台中遇到问题，这可能是什么问题?

After init component i have an issue in console, what could be wrong ?

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);
});

---

如果要保持异步管道，则必须为 chatMessages 分配 observable ，如下所示:

---

If you want to keep async pipe, you have to assign chatMessages with observable, like this :

this.chatMessages = this.chatMessagesService.getMessages();

这篇关于从对象的可观察数组迭代* ngFor时如何修复InvalidPipeArgument错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！