Angular - ngOnInit 中的两个订阅导致对象“未定义" [英] Angular - two subscriptions in ngOnInit result in object 'undefined'

问题描述

简而言之.. 我无法访问我的新闻对象.在函数中调用时，它返回为未定义".

In short.. I am not able to access my news object. It is coming back as 'undefined' when called in a function.

在我的 ngOnInit 中，我有两个订阅.第一个返回一个新闻对象(在组件顶部定义为一个全局变量).

In my ngOnInit I have two subscriptions. First one returns a news object (which is defined as a global variable at the top of the component).

第二个订阅返回一个路由参数，然后触发一个函数(navigateToArticle).

The second subscription returns a route parameter and then triggers a function (navigateToArticle).

现在...当第二个订阅触发navigateToArticle"函数时，我希望该函数能够访问新闻对象.

Now... when the second subscription triggers the 'navigateToArticle' function, I want that function to be able to access the news object.

但是，每次我尝试控制台记录新闻对象时，它都会返回未定义".现在我明白这与异步订阅有关.

However, every time I try to console log the news object, it comes back as 'undefined'. Now I understand that this is something to do with the subscriptions being asynchronous.

所以我的问题是，如何确保新闻对象已加载并可被navigateToArticle"函数访问.可能是某种检查以查看新闻是否已加载?

So my question is, how can I ensure that the news object has been loaded and accessible to the 'navigateToArticle' function. Possibly some kind of check to see if news has been loaded?

抱歉，我是 Angular 的新手，所以请放轻松.我确定我错过了一些非常简单的东西.为清晰起见，我已将代码精简到最低限度.

Sorry, I'm new to Angular so please go easy. I'm sure I'm missing something very simple. I've stripped code down to bare minimum for clarity.

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);
}

推荐答案

如果您想以顺序方式返回 observable，则不应嵌套 subscribe() 方法.相反，我们应该使用 RxJS 的 mergeMap 来映射来自activateRoute 到一个内部 observable，它被分配给 newsID 属性.然后，我们从 _newswireService 调用 getSectors() 方法，然后在下一行的 subscribe() 中返回可观察值.这样，您的 news 就不会是未定义的.

If you want to return observables in a sequential manner, you shouldn't nest your subscribe() methods. Instead, we should be using RxJS's mergeMap to map over the observable values from the activatedRoute into an inner observable, which is assigned to the newsID property. Then, we call the getSectors() method from _newswireService, and the observables are returned in subscribe() on the subsequent line. This way, your news will not be undefined.

不要忘记将 mergeMap 导入到您的组件中！

Do not forget to import mergeMap onto your component!

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();
})

这篇关于Angular - ngOnInit 中的两个订阅导致对象“未定义"的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！