Angular 角度4可观测链

我在观察链上遇到了一个问题，一张地图不等待响应，它破坏了我的想法。我有这样的东西。我在里面有组件和功能

步骤3组件

  addCardAndGotoStep3() {
      this.checkout.newCard = this.appNewCard.newCard;
      this.checkout.addCardAndGotoStep3(this.appNewCard).subscribe();
  }

签出组件

  addCardAndGotoStep3 (newCardForm) {

    if( !newCardForm.isValid) { return; }
    // billingUtilService.checkout.newCard = vm.newCard;
    return this.initPaymentMethods()
        .map( () => {
            // billingUtilService.addCardUi(vm)
            return this.billingUtilService.addCardByRest(this);
        })
        .switchMap( (newCardId) => {
            const model = {};
            console.warn('newCardId' + newCardId);
            console.error(newCardId);

            const card: any  = {};
            card.uuid = newCardId;
            card.fourDigits = this.newCard.cardNumber.slice(-4);
            card.name = this.newCard.name;
            card.id = card.fourDigits;
            this.billingUtilService.checkout.screenPaymentMethod = card;
            this.routeService.gotoState('app.loggedIn.team.checkout.step-3');
            return newCardId;
        })
        .catch( (response) => {
            this.alertService.addValidationAlert(this.tr.TR_CARD_NOT_ACCEPTED);
            return Observable.throw({response});
        });

};

收费服务

addCardByRest(vm) {
    const req = this.createPaymentMethodRequest(vm.newCard);
    return this.billingRest.addAccountPaymentMethod(req)
        .map( (paymentMethodId) => {
            console.warn('successs' + paymentMethodId);
            return paymentMethodId;
        })
        .catch( (response) => {
            console.log('it doesnt work');
            return Observable.throw(response);
        });

比林格尔服务

addAccountPaymentMethod (accountPaymentMethodRequest) {
        return this.http.post(this.restUrl + this.restPrefix + '/addAccountPaymentMethodCC', accountPaymentMethodRequest, {observe: 'response'})
            .map( (response: any) => {
                if (! this.utilService.isDefined(response.body)) {
                    return Observable.throw({});
                }
                return response.body.paymentMethodId;
            })
            .catch((response) => {
                this.logger.debug("addAccountPaymentMethodCatch")
                this.logger.exception('addAccountPaymentMethod : Ajax Error')(response);
                return Observable.throw(response);
            });
    };

我对这部分代码有问题

 .map( () => {
            // billingUtilService.addCardUi(vm)
            return this.billingUtilService.addCardByRest(this);
        })
        .switchMap( (newCardId) => {
            const model = {};
            console.warn('newCardId' + newCardId);
            console.error(newCardId);

该开关映射不会等待addCardByRest返回。我把什么搞混了吗？其他服务返回一个可观察的，所以我不得不使用一些平坦操作符，但实际上它不起作用

控制台输出：

newCardId[object Object]                   checkout-controler.service.ts
Observable {_isScalar: false, source: Observable, operator: CatchOperator} checkout-controler.service.ts
succes: [here is the RightUUid]            checkout-controler.service.ts

---

使用concatMap并订阅最后一个可观察对象，而不是使用switchmap

 .concatMap( () => {
        // billingUtilService.addCardUi(vm)
        return this.billingUtilService.addCardByRest(this);
    })
    .subscribe( (newCardId) => {
        const model = {};
        console.warn('newCardId' + newCardId);
        console.error(newCardId);
    }, error => {
     // Do something with error here instead of catch
    }

---

改用concatMap，一次观察一个，按照它们发出的顺序，switchMap不会等待map完成，因为它就是这样工作的。它没有帮助，console.logsI的顺序仍然很糟糕。它会将您的问题减少到最小可能的情况。？这个。账单服务。添加卡片地址；？？这是什么样的参数？我将这个参数传递给checkout类，然后它从中获取一个字段。我知道这不是很好的代码，但实际上我正在从AngularJS重写应用程序，首先我不想让我的应用程序正常工作，然后是折射代码。非常感谢！它起作用了。我的思维方式不好。为什么我们必须将map更改为concatMap？concatMap将按照您指定的顺序执行观测值，而map/switchmap将同时执行所有观测值，如果第二个观测值比第一个观测值花费的时间少，这可能会给您带来不期望的结果。