时间戳

首页 > 解决方案 > 使用来自服务器的数组初始化表单控件不起作用

angular - 使用来自服务器的数组初始化表单控件不起作用

问题描述

我的要求是遍历来自服务器的数据并创建一个表单组的复选框。我的示例 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 都没有获得任何价值。这很可能是因为那时它的表单已经执行了来自服务器的数据。

标签： angularreactjs

解决方案

我建议，如果您没有任何重要的依赖项，请使用称为Resolver的 Angular 技术：

推荐阅读