Angular - две подписки в ngOnInit приводят к объекту 'undefined' - PullRequest
Новая
       20

Angular - две подписки в ngOnInit приводят к объекту 'undefined'

3 голосов
/ 11 апреля 2019

Короче .. Я не могу получить доступ к своему объекту новостей.Он возвращается как «неопределенный» при вызове в функции.

В моем ngOnInit у меня есть две подписки.Первая возвращает объект новостей (который определяется как глобальная переменная в верхней части компонента).

Вторая подписка возвращает параметр маршрута, а затем вызывает функцию (navigateToArticle).

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

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

Итак, мой вопрос: как я могу убедиться, что новостной объект был загружен и доступен для функции navigateToArticle.Возможно, какая-то проверка, чтобы увидеть, загружены ли новости?

Извините, я новичок в Angular, поэтому, пожалуйста, успокойтесь.Я уверен, что мне не хватает чего-то очень простого.Я сократил код до минимума для ясности. 

public news: Newswire;

ngOnInit() {

    this._newswireService.getSectors().subscribe((news: Newswire) => {
      this.news = news;
    }

    this._activatedRoute.paramMap.subscribe(params => {
       this.newsID = params.get('id');
       this.navigateToArticle();
    })

}

public navigateToArticle() {
    console.log(this.news);
}

1 Ответ

6 голосов
/ 11 апреля 2019

Если вы хотите возвращать наблюдаемые последовательно, вы не должны вкладывать свои subscribe() методы.Вместо этого мы должны использовать RxJS mergeMap , чтобы отобразить наблюдаемые значения из activRoute во внутреннюю наблюдаемую, которая назначена свойству newsID.Затем мы вызываем метод getSectors() из _newswireService, и наблюдаемые значения возвращаются в subscribe() на следующей строке.Таким образом, ваш news не будет неопределенным.

Не забудьте импортировать mergeMap в ваш компонент! 

import { mergeMap } from 'rxjs/operators';

//.
//.

this._activatedRoute.paramMap.pipe(
  mergeMap(params => {
    this.newsID = params.get('id');
    return this._newswireService.getSectors();
  })
).subscribe(res => {
  this.news = news;
  this.navigateToArticle();
})
...