通过Id（Observable）值将HTTP GET传递给组件上的变量

Question

大家好，这是我第一次在这里发帖，大家都感谢你的帮助，但我不知道在这里做什么。

我有一个Angular + 2网络应用程序（我是Angular的新用户），有一个组件（用户）和一个服务（user.service.ts），我已经完成了对getUser（Id）的HTTP请求并返回了json正确地说，在我的组件上我需要用我的服务设置一些变量，但我的变量返回null或空，这可能是最正确的选择呢？

我认为我的错误可能出现在.subscribe方法和Observable上。

//User service
getUser(id:string): Observable<User>{
        return this.http.get<User>(this.userUrl + "/"+ id);   
    } 

//Component

ngOnInit() {
    this.route.params
    .subscribe((params:Params)=>{
      this.id = params['id'];
      this.editMode = params['id'] != null;
      this.initForm();
    });
  }

initForm(){
    let id = '';
    let company ='';
    let userNo = 0;
    let email = '';
    let firstName = '';
    let lastName = '';
    let address1 = '';
    let address2 = '';
    let city = '';
    let country = '';
    let postalCode = '';
    let mobilePhoneNumber = '';
    let homePhoneNumber = '';
    let birthday = '';
    let userType = '';
    let gender = '';

    if(this.editMode){


      this.userService.getUser(this.id).filter(x => x.id === this.id).subscribe((data:User) => { return new User(

          id = data.id,
          userNo = data.userNo,
          firstName = data.firstName,
          lastName = data.lastName,
          address1 = data.address1,
          address2 = data.address2,
          city = data.city,
          country = data.country,
          postalCode = data.postalCode,
          homePhoneNumber = data.homePhoneNumber,
          mobilePhoneNumber = data.mobilePhoneNumber,
          email = data.email,
          gender = data.gender,
          userType = data.userType

      )});


    }

    this.userForm = new FormGroup({
      'company': new FormControl(company, Validators.required), <---- company null/empty
      'userNo': new FormControl(userNo, Validators.required), <---- userNo null/empty
      'email': new FormControl(email, Validators.required), <---- email null/empty
      'firstName': new FormControl(firstName, Validators.required), <---- firstName null/empty
      'lastName': new FormControl(lastName, Validators.required), <---- lastName null/empty
      'address1': new FormControl(address1, Validators.required), <---- address1 null/empty
      'address2': new FormControl(address2, Validators.required), <---- address2 null/empty
      'city': new FormControl(city, Validators.required), <---- city null/empty
      'country': new FormControl(country, Validators.required), <---- country null/empty
      'postalCode': new FormControl(postalCode, Validators.required), <---- postalCode null/empty
      'mobilePhoneNumber': new FormControl(mobilePhoneNumber, Validators.required), <---- mobilePhoneNumber null/empty
      'homePhoneNumber': new FormControl(homePhoneNumber, Validators.required), <---- homePhoneNumber null/empty
      //'birthday': new FormControl(birthday, Validators.required), <---- birthday null/empty
      'userType': new FormControl(userType, Validators.required) <---- userType null/empty

    })



  }

Answer 1

您需要在this.userForm = new FormGroup({})中移动.subscribe()逻辑，因为当您设置this.userForm时，您的订阅尚未完成。

此外，您的订阅将返回未存储在任何位置的新用户。

我建议你创建一个私有方法，它接受一个User实例并创建/更新表单一次（当没有编辑模式时），再次当你处于编辑模式并从订阅中恢复用户数据时。