(Угловой 6) Нажмите кнопку дважды, чтобы работать

Question

У меня есть форма, которую я хочу заполнить информацией моей базы данных.Чтобы сделать это, я сделал метод, который вызывается в моем NgOnInit, но этот метод должен быть вызван дважды, чтобы работать.
Это метод:

  ngOnInit() {
    this.typeForm = this.formBuilder.group({
      name: [],
      sig: [],
      camp: [],
      stat: [],
      campAt: [],
      campRep: []
    }) 
    this.getData();
  }

  getData(){

   this.getById(100).subscribe(x => this.User = x); 

   this.typeForm = this.formBuilder.group({

    name: [this.User.name],
    sig: [this.User.sig],
    camp: [this.User.camp],
    stat: [this.User.stat],
    campAt: [this.User.campAt],
    campRep: [this.User.campRep]

   })
  };

Дело в том, что при загрузке страницы я получаю следующую ошибку в консоли:

Невозможно прочитать свойство 'name'из неопределенного

Но странная вещь в том, что если я нажимаю кнопку, вызывающую getData (), то при нажатии все работает нормально.Если я удаляю getData () из NgOnInit, я должен дважды щелкнуть упомянутую кнопку, чтобы все работало.То есть мне нужно заполнить форму, как только страница загрузится.

Что здесь происходит?Как я могу исправить эту головоломку?

Answer 1

Вы получаете сообщение об ошибке:

Невозможно прочитать свойство 'name' из неопределенного

Поскольку переменная класса User не будет определена до завершения вашей подписки,код под блоком подписки не будет ждать окончания подписки.

Напишите всю свою логику под Subscription из this.getById(100).

Вы можете сделать getData() следующим образом:

getData() {
     this.getById(100).subscribe(x => {
         this.user = x;
         this.typeForm.setValue(this.user)
     }); 
}

Вам не нужно явно устанавливать все значения внутри formControls. Вы можете использовать setValue() в FormGroup, чтобы добавить значения, так как структура возвращаемых данных такая же, как и в вашей форме.

Answer 2

Subscribe является асинхронным, ваш остальной код в getData() будет выполнен до того, как subscribe завершится.

Попробуйте переместить код внутри подписки:

      getData(){

       this.getById(100).subscribe(x => {
         this.User = x;

        this.typeForm = this.formBuilder.group({

          name: [this.User.name],
          sig: [this.User.sig],
          camp: [this.User.camp],
          stat: [this.User.stat],
          campAt: [this.User.campAt],
          campRep: [this.User.campRep]

         });

      }); 


   };