Angular-ngOnInit中的两个预订导致对象“未定义”

时间:2019-04-11 17:26:36

标签: angular asynchronous undefined subscription

简而言之..我无法访问我的新闻对象。在函数中调用时,它以“未定义”的形式返回。

在我的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 个答案:

答案 0 :(得分:5)

如果要按顺序返回可观测值,则不应嵌套subscribe()方法。相反,我们应该使用RxJS的mergeMap来映射来自ActivatedRoute的可观察值到内部的可观察值,该值被分配给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();
})