Первоначально подписка работает нормально, но не возвращает никаких значений при обновлении страницы в приложении Angular

Question

Когда я перехожу на страницу в моем приложении Angular, я отображаю данные, как и ожидалось, используя следующие методы:

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

ionViewWillEnter() {
this.conversationsService.fetchConversation(this.conversationId).subscribe();
}

loadMsg() {
    this.route.paramMap.subscribe(paramMap => {
    this.conversationId = paramMap.get('conversationId');
      this.conversationsSub = this.conversationsService
        .getConversation(paramMap.get('conversationId'))
        .subscribe(conversation => {
          console.log('Conversation values: ', this.conversation);
    });
  }

ionViewWillEnter() {  
    this.loadMsg();
}

Вот некоторые беседы. Сервисный код, я могу предоставить больше при необходимости :

private _conversations = new ReplaySubject<Conversation[]>(1);

get conversations() {
    return this._conversations.asObservable();
}

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

fetchConversation(id: String) {
    return this.http
      .get<{ [key: string]: ConversationData }>('myUrl/conversations.json')
      .pipe(map(resData => {
        const conversations = [];
        for (const key in resData) {
          if (resData.hasOwnProperty(key)) {
            conversations.push(
              new Conversation(
                key,
                resData[key].userId,
                resData[key].mechanicId,
                resData[key].messages
              ));
          }
        }
        console.log('Service Conversation ', { ...conversations.find(conversation => conversation.id === id) });
        return { ...conversations.find(conversation => conversation.id === id) };
      }),
        tap(conversations => {
          this._conversations.next(conversations); // not sure what this should do or does
        })
      );
  }

Однако, когда я обновляю sh страницу, вот что происходит:

1. Нет данных, отображаемых на странице
2. console.log('Conversation values: ', this.conversation); пусто
3. Я также получаю эту ошибку консоли this.conversation.messages is not iterable

Вышеуказанная ошибка относится к this.loadedMessages = [...this.conversation.messages]; внутри моего loadMsg()

Может кто-то Скажите, пожалуйста, почему это хорошо, когда я впервые перехожу на страницу, но вызывает ли я проблемы при перезагрузке?

Answer 1

2 проблемы

1. fetchConversations не похоже, что он когда-либо вызывается, если он вызывается страницами списка, и эти страницы списка не загружаются при прямой навигации по сообщениям , Вам нужно вызвать его где-то на загруженной странице, чтобы он запустился.

2. как только вы исправите это, вы просто получаете начальное пустое значение массива из вашего BehaviorSubject вместо извлеченного значения так как ваш компонент подписывается до завершения выборки, используйте вместо этого ReplaySubject:

   private _conversations = new ReplaySubject<Conversation[]>(1);

субъекты воспроизведения похожи на субъекты поведения в том смысле, что они кэшируют несколько значений и отправлять новым подписчикам, но они не имеют начального значения и не будут отправлять, пока не получат значение для кэширования.