Инициализация управления формой с массивом с сервера не работает

Question

Мое требование состоит в том, чтобы перебрать данные, поступающие с сервера, и создать форму-группу флажков. Мой пример HTML-кода:

 <div *ngFor="let rel of formGroup.controls['releases'].controls;let i = index" style="display:inline-block">
   <clr-checkbox [formControl]="rel" 
          [clrInline]="true">
           {{releases[i].item_text}}
         </clr-checkbox>
</div>

В компоненте ngOnInit я получаю данные с сервера и связываюсь с formGroup.В ngOnInit я определил formGroup как

this.formGroup=this.formBuilder.group({
  releases:this.formBuilder.array(this.releases)
})



this._releaseHandler.getVersionsFromBackend().subscribe((x:Array<any>)=>{     
  x.forEach((value,index)=>{
    this.releases.push({id:index,item_text:value.Release_Name})
  })
  this.buildFormGroup()
}),error=>{console.log(error),()=>{
console.log("Called")
}}

После извлечения данных я создаю formGroup в buildFormGroup

  buildFormGroup(){   
 this.formGroup.controls['releases'].setValue(this.formBuilder.array(this.releases)
}

Данные, поступающие из службы getVersionsFromBackend

 getVersionsFromBackend(){
return this._http.get(this._backendUrl+"/getReleaseDetails").pipe(shareReplay(1))
 }

Но каждый раз formControl не получает никакого значения. Скорее всего, из-за данных, поступающих с сервера, к тому времени его форма уже выполнена.

Answer 1

Я бы предложил, если у вас нет важных зависимостей, использовать угловую технику под названием Resolver :

• Ссылка
  • https://alligator.io/angular/route-resolvers,
  • https://www.techiediaries.com/angular-router-resolve/
• Этот метод используется для загрузки данных перед загрузкой компонента, что намного более элегантно и понятно