Данные, извлеченные в ngOnInit, не отображаются, пока я не изменю размер своего браузера

Question

У меня есть некоторые данные, извлекаемые в ngOnInit() для диалога. Когда диалоговое окно изначально появляется, данные не отображаются. Если я вручную изменю размер окна браузера, оно появится. Если я перейду к другой вкладке во всплывающем окне, а затем вернусь к оригиналу, данные также появятся. Мой ngOnInit -

ngOnInit(): void {
  this.route.params.pipe(takeUntil(this.destroy$)).subscribe( res => {
    this.itemId = res.itemId;
    this.getItemComponents(this.itemId);
    console.log(this.itemComponents);
}

Файл console.log показывает неопределенный при загрузке страницы. Я поместил тот же файл console.log в метод getItemComponents, например так: -

getItemComponents {
  this.itemService.getComponents.subscribe( res => {
    this.itemComponents = res;
    console.log(this.itemComponents);
}

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

Answer 1

Ваш метод console.log на хуке ngOnInit запускается раньше, чем завершается ваша подписка на метод getItemComponents, поэтому вам нужно объединить его в одну цепочку. Попробуйте использовать что-то вроде:

ngOnInit(): void {
    this.route.params
        .pipe(
            takeUntil(this.destroy$),
            switchMap(res => this.itemService.getComponents(res.itemId))
        )
        .subscribe( data => {
            this.itemComponents = data;
            console.log(this.itemComponents);
        }
}