如何将 Angular 2 数据网格绑定到 Angular 4 FormArray答案

【问题标题】：How to bind an Angular 2 data grid to an Angular 4 FormArray如何将 Angular 2 数据网格绑定到 Angular 4 FormArray
【发布时间】：2017-10-31 07:14:17
【问题描述】：

我正在尝试设置一个 Angular 动态表单，它可以绑定到一些简单的编辑器（如文本编辑器），但也公开一个可以绑定到网格的项目列表。一个例子是 Order 和 Items。

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

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

我可以将数据网格（在本例中为 Clarity VMWare）绑定到 FormGroup 项吗？

发送

【问题讨论】：

标签： angular angular-forms vmware-clarity

【解决方案1】：

为了回答我自己的问题，我发现我可以通过获取表单组中抽象控件的值来绑定到表示项目的每个表单组：

<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;
}

【讨论】：

这只是显示值，对吧？不是关于编辑表单控件的问题吗？另请注意，这与清晰度无关。