Передать HTTP GET по значениям Id (Observable) переменным компонента

Question

Здравствуйте, ребята, это мой первый раз, когда я здесь публикуюсь, всем спасибо за вашу помощь, но я не знаю, что здесь делать.

У меня есть веб-приложение Angular + 2 (я новичок в Angular) с одним компонентом (пользователь) и службой (user.service.ts), я уже сделал свой HTTP-запрос для getUser (Id) и возвращая json правильно, в моем компоненте мне нужно установить некоторые переменные с моим сервисом, но мои переменные возвращают ноль или пусто, что может быть наиболее правильным выбором для этого?

Я думаю, что моя ошибка может быть связана с методом .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 и создает / обновляет форму один раз (когда нет режима редактирования) и снова, когда вы находитесь в режиме редактирования и восстанавливает пользовательские данные.из вашей подписки.