In my Ionic 5 / Angular app, I have the below Conversation & Message models:
export class Conversation {
constructor(
public id: string,
public userId: string,
public mechanicId: string,
public messages: Message[]
) { }
}
export class Message {
constructor(
public id: string,
public text: string,
public userId: string,
public timestamp: Date
) { }
}
On Conversation-Detail, I am using the ID of a Conversation to display all Messages within that Conversation:
<ion-virtual-scroll [items]="loadedMessages">
<ion-item-sliding *virtualItem="let message">
<h2>{{ message.text}}</h2>
</ion-item-sliding>
</ion-virtual-scroll>
Conversation-detail.page.ts:
ngOnInit() {
this.conversationsSub = this.conversationsService
.getConversation(paramMap.get('conversationId'))
.subscribe(conversation => {
this.conversation = conversation;
this.loadedMessages = this.conversation.messages;
console.log('Loaded', this.loadedMessages);
this.form = new FormGroup({
message: new FormControl(null, {
})
});
});
});
}
On Conversation-Detail, I also have a form allowing users to add more Messages to this Conversation:
<form [formGroup]="form">
<ion-textarea formControlName="message"></ion-textarea>
<ion-button (click)="onSendMessage()">Send</ion-button>
</form>
Conversation-detail.page.ts:
onSendMessage() {
this.conversationsService.addMessageToConversation(this.conversation.id, this.form.value.message);
}
And here is the ConversationsService code:
addMessageToConversation(conversationId: string, message: string) {
this.getConversationToAddMessage(conversationId).messages.push(this.createMessage(message));
console.log(this._conversations);
}
getConversationToAddMessage(id: string) {
return this._conversations.getValue().find(conversation => conversation.id === id);
}
private createMessage(message: string): Message {
return {
id: Math.random().toString(),
text: message,
userId: this.authService.userId,
timestamp: new Date(Date.now())
};
}
If I enter text into the form, click Send navigate away from the Conversation-Detail page, & navigate back, the new message is displayed in the <ion-virtual-scroll>.
However, the <ion-virtual-scroll> isn’t updated if I don’t leave the page.
Can someone please show me how I can update this list without having to leave the page?
I think I may have to use Subscribers & Observables, but I’m not sure how. Thanks a lot in advance, & I can show more code if it will help solve the issue.
