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

推荐答案

如果要按顺序返回可观测值，则不应嵌套subscribe()方法.相反，我们应该使用RxJS的 mergeMap 来映射ActivateRoute进入一个内部可观察的对象，该对象被分配给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屋！