Kendo Grid for Angular 2反应式FormArray

Question

我在Kendo网格示例中没有找到一个很好，简单，透明的表单示例，其中剑道网格作为formArray，数组的每一行作为表单组，每个单元格作为formcontrol

在另一个问题Batch editing in KendoUI Grid for Angular 2/4中有一个答案，但这不是那么透明。

我不能使这些标签正常工作。

@HostListener('click',["$event.target"]) onClickCalled(target){
    if(target.id =="search")
    {
      console.log("S");
    }
 }

有人进行过这种实现吗？

Answer 1

我已经找到了解决方案。有点小巧，但效果很好。您必须使用网格的每个单元格模板中的FormGroup，将每个Kendo-grid数据项作为FormArray中包含的ng-container处理。就我而言，我从外部服务请求数据，但是如果您在本地拥有它，则几乎是相同的。 这个FormArray也可以放在更大的FormGroup内部，但为简单起见，我将其作为属性。

parent.component.html

<kendo-grid #grid [data]="gridData">
<kendo-grid-column field="firstField" title="ID" width="150">
  <ng-template kendoGridHeaderTemplate>
    <span>First Field</span>
  </ng-template>
  <ng-template kendoGridCellTemplate let-dataItem>
    <ng-container [formGroup]="dataItem">
      <app-my-component formControlName="firstField"></app-my-component>
    </ng-container>
  </ng-template>
</kendo-grid-column>
<kendo-grid-column field="secondField" width="145">
  <ng-template kendoGridHeaderTemplate>
    <span>Second Field</span>
  </ng-template>
  <ng-template kendoGridCellTemplate let-dataItem>
    <ng-container [formGroup]="dataItem">
      <kendo-dropdownlist formControlName="secondField" [valueField]="'id'" [textField]="'text'"></kendo-dropdownlist>
    </ng-container>
  </ng-template>
</kendo-grid-column>

parent.component.ts

import { Component, OnInit, ViewChild } from '@angular/core';
import { GridComponent, GridDataResult } from '@progress/kendo-angular-grid';
import { FormGroup, FormArray, FormBuilder } from '@angular/forms';

 export class ParentComponent implements OnInit {

 @ViewChild(GridComponent) private grid: GridComponent;
  public formArray = this.formBuilder.array([]);
  public gridData: GridDataResult;

  constructor(
    private formBuilder: FormBuilder,
    private service: MyService) {

    super();
  }

  ngOnInit() {
    this.requestData();
  }

  public requestData() {
    const response = this.service.getData().subscribe(data => {
      const that = this;
      response.forEach(function (data, i) {
        that.formArray.insert(i, that.createDataFormGroup(data));
      });

      this.gridData = {
        data: this.formArray.controls,
        total: this.formArray.controls.length
      };
    });
  }