错误TypeError:无法读取角度未定义的属性'closeRow'

时间:2019-05-09 18:50:21

标签: angular kendo-ui kendo-grid

我在另一个剑道网格中有一个剑道网格。新增行功能对于外部网格正常工作,而对于内部网格却给出错误(如下所示);即使作为事件传递的rowIndex也无法识别,它显示为undefined。可能是什么问题

  public addHandler({rowIndex}): void {
    console.log("rowIndex first grid"+rowIndex);
    this.editedRowIndex = rowIndex;
    this.closeEditor();

    this.formGroup = createFormGroup({
        'c1': '',
        'c2': ''
    });
    this.isNew = true;

    this.grid.addRow(this.formGroup);
}

public addHandlerSecond({rowIndex}): void {
    console.log("rowIndex second grid "+rowIndex);
    this.secondEditedRowIndex = rowIndex;
    this.secondCloseEditor();

    this.secondFormGroup = secondCreateFormGroup({
        'd1': '',
        'd2': '',
        'd3': ''
    });
    this.secondIsNew = true;

    this.secondGrid.addRow(this.secondFormGroup);
}

private closeEditor(): void {
    this.grid.closeRow(this.editedRowIndex);

    this.isNew = false;
    this.editedRowIndex = undefined;
    this.formGroup = undefined;
}
private secondCloseEditor(): void {
    this.secondGrid.closeRow(this.secondEditedRowIndex);

    this.secondIsNew = false;
    this.secondEditedRowIndex = undefined;
    this.secondFormGroup = undefined;
}

html文件如下:

<kendo-grid (add)="addHandler($event)"> <!--outer grid-->
  <ng-template kendoGridToolbarTemplate>
    <button kendoGridAddCommand>Add new</button>
    <button *ngIf="formGroup" (click)="cancelHandler()">Cancel</button>
  </ng-template>
<kendo-grid-column>....</kendo-grid-column>

<ng-template kendoGridDetailTemplate let-dataItem>
<section>
 <kendo-grid (add)="addHandlerSecond($event)">      <!--inner grid-->

    <ng-template kendoGridToolbarTemplate>
        <button kendoGridAddCommand>Add new</button>
        <button *ngIf="secondFormGroup" (click)="cancelHandler()">Cancel</button>
      </ng-template>
  <kendo-grid-column>...</kendo-grid-column>

 </kendo-grid>
</section>
</ng-template>

</kendo-grid>

错误如下:

ERROR TypeError: Cannot read property 'closeRow' of undefined
    at TestGridComponent.push../src/app/vtp/details/test-grid/test-grid.component.ts.TestGridComponent.secondCloseEditor (test-grid.component.ts:244)
    at TestGridComponent.push../src/app/vtp/details/test-grid/test-grid.component.ts.TestGridComponent.addHandlerSecond (test-grid.component.ts:149)
    at Object.eval [as handleEvent] (TestGridComponent.html:11)
    at handleEvent (core.js:23107)
    at callWithDebugContext (core.js:24177)
    at Object.debugHandleEvent [as handleEvent] (core.js:23904)
    at dispatchEvent (core.js:20556)
    at core.js:22046
    at SafeSubscriber.schedulerFn [as _next] (core.js:13527)
    at SafeSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.__tryOrUnsub (Subscriber.js:194)

1 个答案:

答案 0 :(得分:1)

尝试一下

  private closeEditor(): void {
   if(this.grid) {// check  if exists
    this.grid.closeRow(this.editedRowIndex); }

    this.isNew = false;
    this.editedRowIndex = undefined;
    this.formGroup = undefined;
}
    private secondCloseEditor(): void {



    if(this.secondGrid) {// check  if exists
      this.secondGrid.closeRow(this.secondEditedRowIndex); }

        this.secondIsNew = false;
        this.secondEditedRowIndex = undefined;
        this.secondFormGroup = undefined;
    }