打字稿方法返回未定义？答案

【问题标题】：typescript method returning undefined?打字稿方法返回未定义？
【发布时间】：2019-09-08 17:35:42
【问题描述】：

您好，我有一个 Angular 5 应用程序。我有一个返回 undefined 的服务方法。这就是我想要做的。我有一个名为 cloneFlight 的函数。我正在调用 flightService.getCampaignsToClone(this.flight) 返回值 undefined 。

cloneFlight() {
    combineLatest(
      this.translateService.get('CONFIRM.CLONE_FLIGHT', { item: this.flight.name}),
      this.flightsService.getCampaignsToClone(this.flight)
    ).subscribe( ([header, campaigns]) => { 
      this.cloneFlightService.openModal(header,this.flight,campaigns);
    });
  }

getCampaignsToClone 的代码如下。

 getCampaignsToClone(flight: Flight){

    let campaignStatusesIdArr: string[];
    let campaigns: CampaignUnpaginated[] ; 
    this.campaignService.getStatuses().subscribe(
      (data) => { 
        campaignStatusesIdArr = data.filter( x => x.code === (CampaignStatusCode.IN_PROGRESS || 
          CampaignStatusCode.READY)).map( y => y.id);
      }
    );
    let accountId: string = flight.campaign.account.id;    

    this.campaignService.getUnpaginatedCampaigns(
      {
        statuses: campaignStatusesIdArr,
        accounts: accountId
      }
    ).subscribe(data=>{
      console.log(data);
      campaigns = data;
    });
    return Observable.of(campaigns);
  }

在 getCampaignsToClone 中，我正在进行一个 http 调用campaignService.getStatuses()，它返回 Observable 。然后过滤掉其中一些，然后我打电话给 getUnpaginatedCampaigns 这是另一个 http 调用。知道什么是编写此代码的最佳方法，以便该方法不会返回未定义。我想我可能没有使用 rxjs 运算符。有人可以帮我弄清楚。

非常感谢

【问题讨论】：

这是典型的异步调用问题，您只能访问订阅内部的值，而不能访问外部
为什么在getCampaignsToClone 中你订阅到一个包含你想要的数据的可观察对象，然后返回一个变量的不同可观察对象，该变量没有'实际上还没有被分配到？我建议为getCampaignsToClone 编写一个测试，以检查它是否实际返回了您想要的数据的可观察对象在尝试将其与其他可观察对象一起使用之前。看起来你可能只想return this.campaignService.getUnpaginatedCampaigns(...)。
没错 jonrsharpe 我只想返回广告系列：CampaignUnpaginated[]。我是 rx js 的新手，无法弄清楚正确的最佳方法是什么。谢谢

标签： typescript rxjs5 rxjs-pipeable-operators

【解决方案1】：

重写您的getCampaignsToClone 方法，使其返回一个可观察序列。使用 flatMap 依次订阅 getUnpaginatedCampaigns observable。

getCampaignsToClone(flight: Flight): Observable<CampaignUnpaginated[]> {
 return this.campaignService.getStatuses().pipe(
    map(data => data.filter( x => x.code === (CampaignStatusCode.IN_PROGRESS || CampaignStatusCode.READY)).map(x => x.id)),
    flatMap(ids => this.campaignService.getUnpaginatedCampaigns({
        statuses: ids,
        accounts: flight.campaign.account.id,
    }))
  );
}

【讨论】：

谢谢你，杰西它有效！！！！！！！你能解释一下吗？我认为平面地图的输入是活动状态流，平面地图有什么作用？？？
FlatMap 需要一个 observable，但不会立即订阅它。当您订阅 getCampainsToClone 可观察对象时，首先您要订阅 getStatuses 可观察对象。下一步：过滤和映射结果。然后你遇到了 flatMap，现在你订阅了它。这是 rxjs 以特定顺序执行异步操作的方式。阅读更多：learnrxjs.io/operators/transformation/mergemap.html