Данные отображаются при первоначальном переходе на страницу приложения Ioni c / Angular, но не отображаются при обновлении

Question

Ниже я отображаю список Conversation объектов:

conversation-list.page.html:

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

conversation-list.page.ts:

ngOnInit() {
      this.authSub = this.authService.userId.pipe(take(1)).subscribe(userId => {
        console.log('NG ONINIT');
        this.conversationsSub = this.conversationsService.conversations.subscribe(conversations => {
          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();
  }

Вот машинопись & HTML для дочернего компонента, app-conversation-item:

export class ConversationItemComponent implements OnInit, OnDestroy {
  @Input() conversation: Conversation;
  username: String;
  imageUrl: String;
  private usersSub: Subscription;

  constructor(public usersService: UsersService) { }
  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;
      }
    );
  }
  getDummyDate() {
    return new Date();
  }
  ngOnDestroy() {
    if (this.usersSub) {
      this.usersSub.unsubscribe();
    }
  }
}

HTML:

 <ion-item>
     <ion-img [src]="imageUrl"></ion-img>
     <h1>{{ username }}</h1>
     {{  getDummyDate() | date  }}
 </ion-item>

Когда я первоначально перехожу на conversation-list.page.html, это то, что отображается на экране и распечатывается на консоли:

Однако, когда я переосмысливаю sh на странице это отображается:

Как видно из консоль, идентификатор пользователя все еще находится внутри метода getUserByUserId() при обновлении, но я не знаю, почему значение User не определено.

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

Вот ConversationsService.getUserByUserId()

getUserByUserId(userId: string) {
    console.log('userIdin getUserByUserId()', userId);
    return this.users.pipe(
      take(1),
      map(users => {
        console.log('Users in getUserByUserId() before find()', users);
        return { ...users.find(user => user.id === userId) };
      })
    );
  }

Кроме того, я могу предоставить больше кода, если требуется.