Javascript 当第一个观察值需要在第二个观察值中时，如何在angular2中链接两个观察值

我想要链2在角度上的可观测，其中第一个可观测的输出需要在第二个可观测函数中作为一个参数

我创造了这样一个可观察的模型：

storeData(response: any): Observable<any> {
  return Observable.create((observer) => {
    // storing the data in localstorage
    this.storage.ready().then(() => {
      this.storage.set('USERACCESSTOKEN', response.token).then(() => {
        this.storage.set('USERROLE', response.user_role).then(() => {
          delete response.token;
          this.storage.set('USERDATA', response).then(() => {
            this.setLoggedIn(true);
            observer.complete();
          })
        })
      })
    })
  });
}

login(form: any, event: Event): void {
  this.authService.otpVerify(form)
    .switchMap((data) => this.authService.storeData(data))
    .subscribe(response => {
        if(this.navCntrl.canGoBack())
          this.navCntrl.pop();
        else
          this.navCntrl.setRoot('TabsPage');
    }, (err)=>{
           console.log("your credentials doesn't match");
    });
}

在这里，从

otpVerify

，我将得到如下响应：

{
   "success"   : true,
   "message"   : "Login success",
   "token"     : "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJod…n19fQ.EMMT6wJeoF7Y52c3UQzgw3rkTY0WduGYq...........",
   "name"      : "Jony",
   "user_role" : "editor"
}

 otpVerify(body: any): Observable<any> {
   let headers = new Headers();
   headers.append('Content-Type', 'application/json');
   this.options = new RequestOptions({ headers: headers });
   return this.http.post(AppSettings.API_ENDPOINT2 + 'login', body, this.options)
     .map(response => response.json())
     .catch(this._errorHandler);
 }

在正确的凭证检查之后，我还要检查用户角色。如果用户角色（编辑器或订阅者）与响应匹配，则只有它将转到

开关映射（（数据）=>this.authService.storeData（数据））

块，否则它将显示不允许此角色的对话框数据也未存储。[我没有在这里添加此逻辑，因为我不知道如何做到这一点。但这正是我想要的]

AuthService

中的

otpVerify

函数类似于：

{
   "success"   : true,
   "message"   : "Login success",
   "token"     : "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJod…n19fQ.EMMT6wJeoF7Y52c3UQzgw3rkTY0WduGYq...........",
   "name"      : "Jony",
   "user_role" : "editor"
}

 otpVerify(body: any): Observable<any> {
   let headers = new Headers();
   headers.append('Content-Type', 'application/json');
   this.options = new RequestOptions({ headers: headers });
   return this.http.post(AppSettings.API_ENDPOINT2 + 'login', body, this.options)
     .map(response => response.json())
     .catch(this._errorHandler);
 }

otpVerify（主体：任何）：可观察{
let headers=新的headers（）；
headers.append（'Content-Type'，'application/json'）；
this.options=newrequestoptions（{headers:headers}）；
返回this.http.post（AppSettings.API_ENDPOINT2+'login'，body，this.options）
.map（response=>response.json（））
.catch（这个._errorHandler）；
}

---

在这个otp验证之后，我想把条件也放进去，看看它是否是一个有效的用户。如果一切正常，我将存储数据，否则将显示一些错误消息。请帮我解决这个问题。

好的，根据我对您最近编辑的理解，这将为我们提供以下信息：

login(form: any, event: Event): void {
  this.authService.otpVerify(form)
    .switchMap(
      (data: any) => {
        if (data.user_role === "editor" || data.user_role === "subscriber") {
          return this.authService.storeData(data);
        } else {
          console.log("Insufficient privileges");
        }
      },
      (err) => console.log(err))
    .subscribe(() => {
      if (this.navCntrl.canGoBack()) {
        this.navCntrl.pop();
      } else {
        this.navCntrl.setRoot('TabsPage');
      }
    });
}

---

switchMap中的代码检查角色并仅在权限足够时调用

storeData

。

那么您想更改

login

方法以使其正常工作，对吗？是@adrienbrunelat当前代码到底出了什么问题？我没有设置我的角度环境，只能通过头部帮助你。这里也存储数据，但问题是页面正在重定向，不知道为什么。我想在subscribe块中写一些逻辑，但它将我从我相信的flatmap返回语句中重定向过来。好吧，我感到困惑了，你能编辑你的原始问题并澄清在这两种情况下（当auth失败和成功时）你想要的确切行为吗？提及方法及其在用例中的作用。工作完美先生，但是不知道，为什么它不去订阅块。page以前只是重定向。你的意思是当你有一个角色为“编辑器”或“订阅者”的用户时，重定向失败了吗？当一切正常时，意味着角色匹配，它会将我重定向到rootpage。也许这是一个离子问题。不知道。是的，看起来这是来自

navCntrl

部分，这是另外一个部分。