Javascript 如何加载表单和加载数据同步？有棱角的

我需要加载数据和表单同步。。。 首先检查我的代码：

 ngOnInit() {
      if (this.data.fromCalendar) {
        this.singleTraining();
      }
    }, 200); 
    this.formControl();
}


  formControl() {
    this.gibanjeAddForm = this.formBuilder.group({
      name: [this.data.fromCalendar ? this.singleTrainingInfo?.name : '', Validators.required],
      description: [this.data.fromCalendar ? this.singleTrainingInfo?.description : ''
    })
  }


  singleTraining() {
    this.trainingService.getSingleTraining(this.data.fromCalendar.id).subscribe(
      data => {
        this.singleTrainingInfo = data; 
      },
      err => console.log(err)
    )
  }

以下是异步数据的问题。。。。 我需要同时加载我的表单和我的培训请求以显示数据。 如果我不以身作则：

this.singleTrainingInfo?.name

刚刚树立的榜样

this.singleTrainingInfo.description

我收到错误singleTrainingInfo未定义，因为未加载更多。。。首先我称之为形式…我不知道；我不知道如何解决这个问题

---

必须以相同的方式加载表单和http。

singleTrainingInfo

是使用

async

调用设置的，这意味着在创建

formControl

方法时。异步调用尚未完成

理想情况下，您应该首先创建一个空表单

formControl() {
    this.gibanjeAddForm = this.formBuilder.group({
      name: ['', Validators.required],
      description: []
    })
}

ajax调用完成后，使用

patchValue

方法填写表单中的数据

singleTraining() {
    this.trainingService.getSingleTraining(this.data.fromCalendar.id).subscribe(
      data => {
        this.singleTrainingInfo = data;
        this.gibanjeAddForm.patchValue(data);
      },
      err => console.log(err)
    )
}