通过 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 实例并创建/更新一次表单（当没有编辑模式时），当您处于编辑模式时再次创建/更新表单并从您的订阅。

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

Pass HTTP GET by Id (Observable) values to variables on component

observable

typescript

angular-services

angular6

rxjs6