我无法在Angular 13中观察到的Mergemap上订阅

Question

我想根据Angular的角色实施Connexion Senario。当用户填写表单后（用户名 - 密码）后单击连接按钮时，请使用两个API URL使用相同的连接，并且我将Angular 13用于前端。在后端，我有两个端点（Ressources请求URL）用于连接过程。第一个Ressource

this.http.post（$ {emovenese.baseurlusersecurity}/users/user/login， 数据，选项）

提供了用于身份验证和第二个ressource的令牌

this.http.get（$ {emoverun.baseurlusersecurity}/prsnls， this.userid）

必须根据令牌firt api呼叫提供的用户ID来查找用户的角色。与Postman进行测试时，一切都很好。但是我正在努力与Angular在前端中实现连接过程，这是我到目前为止所做的：

//登录方法，该方法调用2个API urls

login(data){
      const Option ={ headers: new HttpHeaders({'Access-Control-Allow-Origin': '*', 'Content-Type': 'application/json',"USER_CODE":data.USER_CODE})};
      this.http.post<any>(`${environment.baseUrlUserSecurity}/users/login`, data, Option)
      .pipe(
        map(value => value[0]))
      .subscribe( value => {
        this.userId = value.result.userId;
        this.http.get(`${environment.baseUrlUserSecurity}/prsnls`, this.userId)
        .subscribe( user => {
          this.user = user;
          localStorage.setItem('currentUser', JSON.stringify(user));
              this.currentUserSubject.next(user);
              return user;
        });
      })
    }

//当按钮按下

onSubmit(){
    const data = this.loginForm.getRawValue();
    this.submitted = true;
    localStorage.setItem('USER_CODE',data.USER_CODE);
    this.loading = true;
    this.isLoading = true;
    of(null)
      .pipe(
        delay(2000),
        first()
      )
      .subscribe(() => {

        this.isLoading = false;
        this.authService.login(data).subscribe(
            (res:any)=>{
              if (res.code==200){
                  localStorage.setItem('token',res.result.token);
                  localStorage.setItem("infos", JSON.stringify(res.result.roleIds));
                  localStorage.setItem("prsl", res.result.userId);
                  //this.getUserInfos(res.result.userId);
                  this.router.navigate(['/dashboard']);
              }

              this.rMessage = '';

            },
              error => {
                  this.rMessage = 'bError';
                  this.loading = false;
              }
          );
      });


  }

问题时，onsubmit Action是编辑说' subscribe（）'属性不存在于onsubmit（）函数this.authservice.login（data）.subscribe（）上的onsubmit（）函数内部的类型void上不存在而且我不明白为什么我不能订阅可观察到的。我很感谢是否有人提供帮助，因为我不知道如何解决此问题并在没有错误的情况下获取编辑器。提前致谢。

Answer 1

请记住：“您的服务返回可观察物，您

每次在服务中撰写“订阅”时，您会订阅“订阅”，您会陷入不良练习中（*）

，您需要返回基于另一个的可观察到的，因此您需要使用SwitchMap RXJS操作员。 SwitchMap始终以

observable1(data).pipe(switchMap(res=>{
   //here res is the response of the observable1(data)
   //you return another observable based in res
   return observable2(res) 
})

您的登录

login(data){
      const Option ={ headers: new HttpHeaders({'Access-Control-Allow-Origin': '*', 'Content-Type': 'application/json',"USER_CODE":data.USER_CODE})};
      
      //see that you "return" an observable
      return this.http.post<any>(`${environment.baseUrlUserSecurity}/users/login`, data, Option)
      .pipe(
       switchMap(value=>{
          const userId=value[0].result.userId
          return this.http.get(`${environment.baseUrlUserSecurity}/prsnls`, userId)

       })

方式，您可以订阅

onSubmit(){
    const data = this.loginForm.getRawValue();
    this.submitted = true;
    this.authService.login(data).subscribe(
            (res:any)=>{
              if (res.code==200){
                  localStorage.setItem('token',res.result.token);
                  localStorage.setItem("infos", JSON.stringify(res.result.roleIds));
                  localStorage.setItem("prsl", res.result.userId);
                  //this.getUserInfos(res.result.userId);
                  this.router.navigate(['/dashboard']);
              }

              this.rMessage = '';

            },
              error => {
                  this.rMessage = 'bError';
                  this.loading = false;
              }
          );
      }); 

（*）您可以在服务中使用某些喜欢的服务

subject=new Subject<any>()
getData(){
   this.httpClient.get(...).subscribe(res=>{
       this.subject.next(res)
   })
}

，并且您可以订阅“主题”并致电该功能

this.authService.subject.subscribe(res=>{
   ...
})
this.authService.getData();

，但对于某些“特殊情况”

更新有时，futhermore内部观察值的数据我们还需要第一个可观察到的数据，我们需要使用另一个RXJS操作员map

我们

   observable1(data).pipe(switchMap(respose1=>{
       return observable2(response1).pipe(map(response=>(
         {response1:response1,response2:response2}
       )))
    })

有一个具有两个属性的对象：响应2

好吧，我们也可以使用传播运算符映射

   observable1(data).pipe(switchMap(respose1=>{
       return observable2(response1).pipe(map(response=>(
         {...response1,...response2}
       )))
    })

，并且我们获得了一个唯一的对象，该对象具有响应的所有属性1和Response2

Answer 2

您需要从登录方法返回可观察的。

如果您订阅并返回，则将返回subcription type.so返回可观察并操纵结果并在响应后做一些事情，您必须使用管道。

我更改了您的登录方法如下

  login(data): Observable<any> {
    const Option = {
      headers: new HttpHeaders({
        'Access-Control-Allow-Origin': '*',
        'Content-Type': 'application/json',
        USER_CODE: data.USER_CODE,
      }),
    };
    return this.http
      .post<any>('${environment.baseUrlUserSecurity}/users/login', data, Option)
      .pipe(
        map((value) => value[0]),
        tap((value) => (this.userId = value.result.userId)),
        switchMap((value) =>
          this.http
            .get<User>('${environment.baseUrlUserSecurity}/prsnls', this.userId)
            .pipe(
              tap((user:User) => {
                this.user = user;
                localStorage.setItem('currentUser', JSON.stringify(user));
                this.currentUserSubject.next(user);
              }),
              map((user) => ({ ...user, ...value }))
            )
        )
      );
  }