Question

我的要求是遍历来自服务器的数据并创建一个formGroup的复选框。我的示例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")
}}

获取数据后，我在 buildFormGroup

中创建formGroup

  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 的Angular技术：

参考
- https://alligator.io/angular/route-resolvers，
- https://www.techiediaries.com/angular-router-resolve/
此技术用于在加载组件之前加载数据，这更加优雅和清晰

使用服务器中的数组初始化表单控件不起作用

1 个答案: