angular - 如何将 Angular 2 数据网格绑定(bind)到 Angular 4 FormArray

Question

我正在尝试设置一个 Angular 动态表单，它可以绑定(bind)到一些简单的编辑器(例如文本编辑器)，但也公开可以绑定(bind)到网格的项目列表。一个例子是订单及其项目。

据我了解，Angular Dynamic Forms 创建了一个从“真实”对象填充的更改跟踪模型 - 在订单项目的示例中，每个项目将创建为 FormGroup，然后添加到 FormArray。

这一切都很有意义，并且在绑定(bind)到简单控件时很容易启动并运行它，但现在我需要将订单项绑定(bind)到数据网格。这似乎是一个非常常见的情况，但我在任何地方都没有看到提到这一点？我怀疑我可能没有遵循推荐的模式？

我可以将数据网格(在本例中为 Clarity VMWare)绑定(bind)到 FormGroup 项目吗？

发送

Answer 1

为了回答我自己的问题，我发现我可以通过获取表单组内抽象控件的值来绑定(bind)到代表项目的每个表单组:

<clr-dg-row *ngFor="let item of orderItems" [clrDgItem]="item">
<clr-dg-cell>{{ item.get('code').value }}</clr-dg-cell>
<clr-dg-cell>{{ item.get('value').value }}</clr-dg-cell>
</clr-dg-row>

如果您想知道 item.get('controlName') 获取控件组中的控件，并且 .value 检索其当前值。项目列表在组件上公开，如下所示:

get orderItems(): AbstractControl[] {

    return (this.orderForm.get('items') as FormArray)
      .controls;
}