如何加載表單和加載數據同步？ 角

Question

我需要加載數據和表單同步...首先檢查我的代碼：

 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)
    )
  }

這是異步數據問題......我需要同時加載我的表單和我的 singleTraining 請求以顯示數據。 如果我不舉例：

this.singleTrainingInfo?.name

剛剛設置的例子

this.singleTrainingInfo.description

我收到錯誤 singleTrainingInfo 未定義，因為沒有加載更多...首先我調用了表單...我不知道如何解決這個問題。

必須以相同的方式加載表單和 http。

Answer 1

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)
    )
}