Angular flatMap获取和放置请求未返回结果

Angular flatMap获取和放置请求未返回结果,angular,http,flatmap,Angular,Http,Flatmap,我有一个getUserInfo函数,可以成功返回用户的id、电子邮件等。。 我还有一个updateUserEmail函数,它使用flatMap来整合GET请求(getUserInfo())以执行服务器验证,然后是PUT请求。我以前从未使用过平面图,所以我也在尝试找出在哪里进行验证。我不确定是否对get UserInfo函数进行了验证,但它似乎是最符合逻辑的地方。我需要在PUT请求之前验证GET请求,以防验证失败,我希望PUT请求不会发生 另外,我知道我没有使用flatMap中的userInfo值

我有一个getUserInfo函数,可以成功返回用户的id、电子邮件等。。 我还有一个updateUserEmail函数,它使用flatMap来整合GET请求(getUserInfo())以执行服务器验证,然后是PUT请求。我以前从未使用过平面图,所以我也在尝试找出在哪里进行验证。我不确定是否对get UserInfo函数进行了验证,但它似乎是最符合逻辑的地方。我需要在PUT请求之前验证GET请求,以防验证失败,我希望PUT请求不会发生

另外,我知道我没有使用flatMap中的userInfo值。因为我真的不知道该怎么做。这不是一个我可以获取用户信息的服务器响应。\u id。我对这一切都很陌生,所以谢谢你的帮助

用户服务

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { UserEmailChange } from './emailChange.model';
import { flatMap } from 'rxjs/operators';
import { AuthService } from '../auth.service';
import { tap } from 'rxjs/operators';

@Injectable({ providedIn: 'root' })
export class ProfileService {
  userId = localStorage.getItem("userId: ");

  constructor(private http: HttpClient, private authService: AuthService) { }

  getUserInfo(id: string, oldEmail: string) {

    this.http.get(`http://localhost:3000/api/user/${id}`).pipe(tap(value => 'output: ' + "TEST" + value)).subscribe((res) => {


      if (this.userId === res["posts"]._id && oldEmail === res["posts"].email) {
        console.log("You passed the id and email test");
      }
      else {
        console.log("You failed the test!");
      }
    });

    }

    updateUserEmail(emailChange: UserEmailChange) {
      return this.getUserInfo(this.userId, emailChange.oldEmail)
      .pipe(flatMap(userInfo => this.http.put(`http://localhost:3000/api/user/${this.userId}`, emailChange )));
    }

}
用户组件

import { Component, OnInit } from '@angular/core';
import { ProfileService } from './profile.service';
import { AuthService } from '../auth.service';
import { UserEmailChange } from './emailChange.model';

@Component({
  selector: 'app-profile',
  templateUrl: './profile.component.html',
  styleUrls: ['./profile.component.css']
})
export class ProfileComponent implements OnInit {
  userId: string;
  authenticated = false;
  emailResponse: string;
  idResponse: string;
  oldEmail: string;
  constructor(private profileService: ProfileService, private authService: AuthService) { }

  ngOnInit() {
    this.userId = localStorage.getItem("userId: ");
  }

  onUpdateUserEmail(oldEmail: string, newEmail: string) {
    const userEmailChange = new UserEmailChange();
    userEmailChange.oldEmail = oldEmail;
    userEmailChange.newEmail = newEmail;


    this.profileService.updateUserEmail(userEmailChange).subscribe(emailUpdated => {



    });

  }


}

当前在服务的updateUserEmail()中,.pipe正在返回错误
属性“pipe”在类型“void”上不存在。正如@Alexander提到的,您没有从
getUserInfo
正确返回值。您需要返回可观察对象,然后在您要将其返回到的函数中对其执行所需的操作

getUserInfo(id:string,oldmail:string){
返回this.http.get(`http://localhost:3000/api/user/${id}`)
.烟斗(
抽头(值=>'输出:'+“测试”+值),
轻触(res=>{
如果(this.userId==res[“posts”]。\u id&&oldmail==res[“posts”].email)
log(“您通过了id和电子邮件测试”);
else console.log(“测试失败!”);
})
);
}
updateUserEmail(emailChange:UserEmailChange){
返回此.getUserInfo(this.userId,emailChange.oldEmail)
.烟斗(
flatMap(userInfo=>this.http.put(`http://localhost:3000/api/user/${this.userId}`,emailChange))
);

}
您试图添加可管道操作符的类方法不会返回任何内容,因为您在其中使用了subscribe()。不要订阅这些方法,而是返回Observable,以便能够使用其他方法中的附加管道()来使用它们。如果您需要在“获取用户信息”等方法中执行副作用,请在那里使用管道和tap/do等操作符。