Подписка в Angular приложении не получает данные

Question

Ниже приведен код, превышаемый при переходе на страницу Conversation-List моего приложения Angular:

ngOnInit() {
      this.authSub = this.authService.userId.pipe(take(1)).subscribe(userId => {
        console.log('NG ONINIT');
        this.conversationsSub = this.conversationsService.conversations.subscribe(conversations => {
          loadingEl.dismiss();
          this.loadedConversations = conversations.filter(
            conversation =>
              conversation.userId === userId || conversation.mechanicId === userId
          );
          console.log('Loaded Conversations:', this.loadedConversations);
        })
      });
  }

  ionViewWillEnter() {
    console.log('ION VIEW WILL ENTER');
    this.conversationsService.fetchConversations().subscribe();
  }

При первоначальном переходе на эту страницу сведения User отображаются в консоль:

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

Может кто-нибудь сказать, почему пользователь не определено, когда я обновляю sh страницу?

Этот User объект используется в Conversation-list ниже:

Conversation-list.page.html:

<ion-item *ngFor="let conversation of loadedConversations">
    <app-conversation-item [conversation]="conversation"></app-conversation-item>
</ion-item>

Машинопись:

export class ConversationItemComponent {

    @Input() conversation: Conversation;
    ngOnInit() {
        this.usersSub = this.usersService.getUserByUserId(this.conversation.mechanicId).subscribe(  
            user => {
                console.log(`User`, user);
                console.log(`Username`, user.name);
                console.log(`Image URL`, user.imageUrl);
                this.username = user.name;
                this.imageUrl = user.imageUrl;
            }
        );
    }
}

Answer 1

Есть 2 пункта, которые вы можете улучшить:

1 - Не используйте вложенные подписки, так как это не рекомендуется для Rx JS. Например, вы можете использовать оператор combineLatest:

ngOnInit() {
  combineLatest([this.authService.userId, this.conversationsService.fetchConversations()])
   .pipe(takeUntil(this.destroy$))
   .subscribe(([userId, loadedConversations]) => {
      console.log('UserId', userId);
      this.loadedConversations = loadedConversations.filter(
        conversation =>
          conversation.userId === userId || conversation.mechanicId === userId
        );
      console.log('Loaded Conversations', this.loadedConversations);
     }
  }

// ionViewWillEnter() has been removed, as we embed the call in combineLatest

combineLatest, ожидающий, что обе наблюдаемые величины будут иметь значение. В противном случае вы можете использовать оператор withLatestFrom(), если вы заинтересованы в извлечении только самого последнего значения одной из 2 наблюдаемых (например, Auth Service).

2 - В случае, если код находится в компоненте, вы Не забудьте отписаться от obervables, чтобы избежать утечек памяти. Например, вы можете использовать оператор takeUntil(this.destroy$) и тему, которую вы вызываете в хуке компонента onDestroy:

private destroy$ = new Subject<boolean>();

ngOnDestroy() {
  this.destroy$.next(true);
}