Angular 6 RxJS6可观察不按正确顺序返回数据

Question

我循环一个数组并调用LoadReportsData。 getProjectReportsData中的_reportingService以正确的顺序被调用。但是当控制从服务地图返回时被命中，然后.subscribe()内部的代码在所有调用完成之前不会被命中。

之后，结果将以随机顺序分配给this.reportData。由于这种行为，工作簿中的工作表是随机创建的，而不是按预期的顺序创建的。请建议是否有不同的方式拨打电话或建议一些解决方法。

FetchProjectSubmissionReportingAssets(ID: number,
        mySelectiontot: number, PRsDelimitedList: string, StartDate: string, EndDate: string) {

        let currAsset: string = '';
        let ID: number;
        var fetchAssetData = {
            'CSID': ID
        }
        this._reportingService.isLoading = true;
        this._reportingService.getProjSubRptAssets(fetchAssetData).pipe(
            map(result => {
                if (result != null) {

                    for (var i = 0; i < result.length; i++) {
                        this.ProjReqSubmissionReportingAssets = result;


                        currAsset = result[i].option;
                        ID = result[i].id;

                        this.LoadReportsData(ID, currAsset, i);

                    }
                }
            }))
            .subscribe();


    }


    LoadReportsData(CSAsID: number, currAsset: string, tabIndex: number) {

        this.wb = XLSX.utils.book_new();

            var indata = {
                'CSID': this.CSID,
                'CSAsID': CSAsID,
                'StartDate': this.StartDate,
                'EndDate': this.EndDate,
                'PRsDelimitedList': this.PRsDelimitedList

            }
            this._reportingService.getProjectReportsData(indata).pipe(
                map(result => {

                        this.reportData = result;

                        this.idx = this.idx + 1;

                        if (this.reportData != null) {
                            this.ws = this.ws + '_' + tabIndex.toString();
                            this.ws = XLSX.utils.json_to_sheet(this.reportData);
                            XLSX.utils.book_append_sheet(this.wb, this.ws, currAsset);
                            console.log(currAsset);
                        }
                        if (this.ProjReqSubmissionReportingAssets.length == this.idx) {
                            var currDateTime = this.fn_getTimeStamp();
                            XLSX.writeFile(this.wb, "ProjReport_" + this.HCs + "_" + currDateTime + ".xlsx");
                        }

                }))
            .subscribe();

            this._reportingService.isLoading = false;

}

Answer 1

您可以创建所有这些内容的数组，而不是在循环内部进行API调用，而将combineLatest全部放入。然后订户最终将以正确的顺序接收数据。

通常，这样的事情：

    this._reportingService.getProjSubRptAssets(fetchAssetData).pipe(
        filter(result => result !== null),
        map(result => result.map(
            curAsset => this.LoadReportsData(curAsset.id, curAsset, i)
        )),
        switchMap(requestsArray => combineLatest(requestsArray))
    ).subscribe(
        resultArray => {
            // resultArray should consist responses of API calls in the same order
            // the results getProjSubRptAssets(fetchAssetData) came in
        })