将 HTTP GET by Id(可观察)值传递给组件上的变量

Question

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

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

我认为我的错误可能是在 .subscribe 方法和可观察的东西上。

//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

您需要在

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

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

我建议您创建私有方法，该方法采用User实例并创建/更新表单一次(在没有编辑模式时(，并在您处于编辑模式并从订阅中恢复用户数据时再次创建/更新表单。