Angular 5中Rxjs forkJoin使用问题：订阅数据取值为undefined

我来帮你分析并解决这个RxJS取值异常的问题：

问题根源 #

你的代码里在map操作符中嵌套返回了forkJoin Observable，造成了不必要的高阶Observable嵌套（即Observable<Observable<[Player, Clan]>>）。虽然flatMap本应负责展平这种嵌套，但冗余的写法最终导致订阅时拿到的是forkJoin的Observable实例，而非它发射的结果数组——这就是为什么data[0]会是undefined（你把Observable对象当成数组访问索引，自然拿不到有效数据）。

修正方案 #

给你两种简洁可靠的写法：

方案一：直接在map中组合结果 #

这种写法最直观，无需使用forkJoin：

this.playerSearchService.getPlayerByPlayerTag(this.searchValue)
  .flatMap(player => 
    // 获取clan后，直接将player和clan组合成数组
    this.clanSearchService.getClanByClanTag(player.clan.tag)
      .map(clan => [player, clan])
  )
  .subscribe(([playerResult, clanInfo]) => {
    this.playerResult = playerResult;
    this.clanInfo = clanInfo;
    console.log(playerResult, clanInfo);
  });

方案二：正确使用forkJoin #

如果更倾向于用forkJoin，可以直接在flatMap中返回它，避免嵌套：

this.playerSearchService.getPlayerByPlayerTag(this.searchValue)
  .flatMap(player => 
    Observable.forkJoin([
      Observable.of(player), // 用of包装已获取的player
      this.clanSearchService.getClanByClanTag(player.clan.tag)
    ])
  )
  .subscribe(([playerResult, clanInfo]) => {
    this.playerResult = playerResult;
    this.clanInfo = clanInfo;
    console.log(playerResult, clanInfo);
  });

原代码问题详解 #

原代码中，getClanByClanTag返回Observable<Clan>，你用map把它转换成了Observable<Observable<[Player, Clan]>>——相当于把Observable包在了另一个Observable里。虽然flatMap理论上会展平这个结构，但这种冗余嵌套很容易因为RxJS版本细节或操作符顺序问题，导致最终订阅到的是forkJoin实例而非它的发射值。

内容的提问来源于stack exchange，提问作者MarcoLe