ОШИБКА TypeError: невозможно прочитать свойство closeRow неопределенного в angular

У меня есть кендо-сетка внутри другой кендо-сетки. Функция добавления новой строки правильно работает для внешней сетки, тогда как для внутренней сетки выдает ошибку (приведенную ниже); даже rowIndex, переданный как событие, не распознается, он отображается как неопределенный. В чем может быть проблема

  public addHandler({rowIndex}): void {
    console.info("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.info("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)

Вы где-то устанавливаете this.grid? Если это так, было бы полезно увидеть эту часть кода. Если нет, то это проблема.

J. Lenthe 09.05.2019 20:57
Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest
В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...
Angular и React для вашего проекта веб-разработки?
Angular и React для вашего проекта веб-разработки?
Когда дело доходит до веб-разработки, выбор правильного front-end фреймворка имеет решающее значение. Angular и React - два самых популярных...
Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf
Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf
Мы провели Twitter Space, обсудив несколько проблем, связанных с последними дополнениями в Angular. Также прошла Angular Tiny Conf с 25 докладами.
Угловой продивер
Угловой продивер
Оригинал этой статьи на турецком языке. ChatGPT используется только для перевода на английский язык.
Мое недавнее углубление в Angular
Мое недавнее углубление в Angular
Недавно я провел некоторое время, изучая фреймворк Angular, и я хотел поделиться своим опытом со всеми вами. Как человек, который любит глубоко...
Освоение Observables и Subjects в Rxjs:
Освоение Observables и Subjects в Rxjs:
Давайте начнем с основ и постепенно перейдем к более продвинутым концепциям в RxJS в Angular
0
1
779
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 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;
    }

Частная сетка @ViewChild(GridComponent): GridComponent; частный secondGrid: GridComponent; Я объявил сетку вот так. И передать formGroup как this.grid.addRow(formGroup) в addHandler.. Мне нужно написать что-то еще?

hss 10.05.2019 07:00

вам нужно воссоздать ошибку в демо, например stackblitz.com, чтобы я мог понять полный код

dota2pro 10.05.2019 16:51

Другие вопросы по теме