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

Posted 2023-02-22

【中文标题】使用来自服务器的数组初始化表单控件不起作用

【英文标题】：Initializing form control with the array from server not working

【发布时间】：2019-03-27 11:26:49

【问题描述】：

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

【问题讨论】：

我建议如果你没有任何重要的依赖项，使用称为 Resolver 的 Angular 技术：参考 -> alligator.io/angular/route-resolvers, techiediaries.com/angular-router-resolve ==>此技术用于在组件已加载

@Itamar 感谢您的建议。现在我通过使用 this.formGroup.setControl('release',this.formBuilder.array(this.releases)) 解决了这个问题

@Itamar 我尝试使用解析器，效果非常好。请发布您的答案，我会接受

【参考方案1】：

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

参考

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