Subscription working fine initially, but not returning any values when page refreshed on Angular app

Ionic Framework Ionic Angular
1

When I navigate to a page in my Angular app, I am displaying data as expected using the below methods:

conversationsSub: Subscription;
usersSub: Subscription;
conversation: Conversation;
loadedMessages: Message[];

ngOnInit() {
    this.loadMsg();
  }

loadMsg() {
    this.route.paramMap.subscribe(paramMap => {
      this.conversationsSub = this.conversationsService
        .getConversation(paramMap.get('conversationId'))
        .subscribe(conversation => {
          console.log('Conversation values: ', this.conversation);
          this.conversation = conversation;
          this.loadedMessages = [...this.conversation.messages];
          this.usersSub = this.usersService.getUserByUserId(this.conversation.mechanicId).subscribe(
            user => {
              this.mechanicName = user.name;
            });
        });
    });
  }

ionViewWillEnter() {  
    this.loadMsg();
}

Here is some Conversations.Service code, I can provide more if required:

 getConversation(id: string) {
    return this.conversations.pipe(
      take(1),
      map(conversations => {
        return { ...conversations.find(conversation => conversation.id === id) };
      }));
  }

However, when I refresh the page, here is what’s happening:

  1. No data is displaying on the page
  2. console.log('Conversation values: ', this.conversation); is empty
  3. I also get this console error this.conversation.messages is not iterable

The aboe error is in relation to this.loadedMessages = [...this.conversation.messages]; inside my loadMsg()

Can someone please tell me why this is fine when I first navigate to the page, but is causing issues when I reload?

2

The take(1) operator will unsubscribe you, that’s why you are not receiving more notifications.