在 ngOnInit 中无法读取未定义的属性 'map'

Question

我是使用 angular 的新手，并且总体上使用 JHipster。现在，我在使用 JHipster 提供的过滤时遇到了问题。要加载页面，我需要获取以下所有数据：

主题（从activatedRoute获得）
主题（主题的一部分）
子主题（即获得的每个主题的一部分）
活动（作为获得的每个子主题的一部分）

我这样做的方式是在 ngOnInit 函数中：

ngOnInit() {
    this.activatedRoute.data.subscribe(({ subject }) => {
      this.subject = subject;
    });

    this.themeService.query({
      'subject.equals': this.subject.id
    }).subscribe((res: HttpResponse<ITheme[]>) => (this.themes = res.body), (res: HttpErrorResponse) => this.onError(res.message));

    const themesIds = this.themes.map(({ id }) => id);

    this.subthemeService.query({
      'theme.in': themesIds
    }).subscribe((res: HttpResponse<ISubtheme[]>) => (this.subthemes = res.body), (res: HttpErrorResponse) => this.onError(res.message));

    const subthemesIds = this.subthemes.map(({ id }) => id);

    this.activityService.query({
      'subtheme.in': subthemesIds
    }).subscribe((res: HttpResponse<IActivity[]>) => (this.activities = res.body), (res: HttpErrorResponse) => this.onError(res.message));

  }

我希望每个人都能正确获取每个数组，但我得到的是：

ERROR TypeError: Cannot read property 'map' of undefined
    at SubjectPlanComponent.ngOnInit (subject-plan.component.ts?2994:73)
    at checkAndUpdateDirectiveInline (core.js?09c9:19327)
    at checkAndUpdateNodeInline (core.js?09c9:27585)
    at checkAndUpdateNode (core.js?09c9:27547)
    at debugCheckAndUpdateNode (core.js?09c9:28181)
    at debugCheckDirectivesFn (core.js?09c9:28141)
    at Object.eval [as updateDirectives] (SubjectPlanComponent_Host.ngfactory.js? [sm]:1)
    at Object.debugUpdateDirectives [as updateDirectives] (core.js?09c9:28133)
    at checkAndUpdateView (core.js?09c9:27529)
    at callViewAction (core.js?09c9:27770)

同样，我在这里搜索过类似的问题，但 none 已经解决了我的问题。我看过一些帖子解释说这是因为它获取数据的方式（异步），但我不太明白是如何获取数据的。现在我只担心让这个东西工作，但解释会很方便。

完整代码：https://pastebin.com/fXfSZRmG

Answer 1

问题是，当您尝试在行 const themesIds = this.themes.map(({ id }) => id); 中访问 this.themes.map 时。你不知道异步信息是否已经存在：this.themeService.query(...).subscribe()

延迟订阅后尝试访问 themes.map。像这样；

this.themeService.query({'subject.equals': this.subject.id}).subscribe(
    (res: HttpResponse<ITheme[]>) => { 
    this.themes = res.body;
    const themesIds = this.themes.map(({ id }) => id); // at this point we are sure, that this.themes is there
    }, 
    (res: HttpErrorResponse) => this.onError(res.message));

子主题也是如此。

Answer 2

这对我来说很有意义。这里报错是因为js中的async概念。你可以在这里了解更多 Asynchronous JavaScript

Observable 是 RXJS 库提供的一个异步 API，用于处理你不知道何时应该完成的操作，就像发出 HTTP 请求一样。

您可以从这里阅读更多关于 RXJS 的信息 RXJS DOCs 在你的情况下，你需要了解 observable 我希望 angular 文档能帮助你 obsevables

在 ngOnInit 中无法读取未定义的属性 'map'

Cannot read property 'map' of undefined while in ngOnInit

typescript

jhipster

angular

在 ngOnInit 中无法读取未定义的 属性 'map'

Cannot read property 'map' of undefined while in ngOnInit

typescript

jhipster

angular

在 ngOnInit 中无法读取未定义的属性 'map'