получение TypeError: Невозможно прочитать свойство 'queryService' из неопределенного

Question

Я пытаюсь добавить кнопку экспорта в Excel в сетку интерфейса Kendo.Когда кнопка нажата, я продолжаю получать следующую ошибку «TypeError: Невозможно прочитать свойство« queryService »из undefined».Я использую Angular 8.2 с AOT и отложенной загрузкой маршрута.

Вот HTML-код моего компонента:

<kendo-grid [data]="ProcessedMessageQueueGridData | async" [selectable]="true" [height]="gridHeight"
      (sortChange)="sortChange($event)"
      (selectionChange)="selected($event)" (dataStateChange)="onStateChange($event)"
      (detailExpand)="onDetailExpand($event)" id="ProcessedMessageQueueGrid">
      <ng-template kendoGridToolbarTemplate>
        <button tooltip="Export PDF" kendoGridPDFCommand>
          <fa-icon [icon]="['fas', 'file-pdf']"></fa-icon>
        </button>
        <button tooltip="Export to Excel" kendoGridExcelCommand>
          <fa-icon [icon]="['fas', 'file-excel']"></fa-icon>
        </button>
      </ng-template>
      <kendo-grid-column *ngFor="let column of columns" field="{{column.field}}" title="{{column.title}}"
        sortable="true" filterable="{{column.filterable}}" filter="{{column.filter}}" format="{{column.format}}"
        [hidden]="hiddenColumns.indexOf(column.field) > -1">
      </kendo-grid-column>
      <div *kendoGridDetailTemplate="let dataItem">
        <app-ccmis-history [rampid]="dataItem.rampID"></app-ccmis-history>
      </div>
      <kendo-grid-pdf fileName="ProcessedMessageQueue.pdf" [allPages]="true">
        <kendo-grid-pdf-margin top="1cm" left="1cm" right="1cm" bottom="1cm"></kendo-grid-pdf-margin>
      </kendo-grid-pdf>
      <kendo-grid-excel fileName="ProcessedMessageQueue.xlsx" [fetchData]="allData"></kendo-grid-excel>
    </kendo-grid>

Вот мой файл component.ts:

constructor(public queryService: ProcessedMessageQueueQueryService) {}

public allData(st?: any): Observable<any> {
        const state = Object.assign({}, st);
        delete state.skip;
        delete state.take;
        return this.queryService.fetch(state).pipe(takeUntil(this.destroy$));
    }

Я пытался использовать пример кода из документации Kendo UI Grid, но все равно получал ту же ошибку.Я также попытался отключить AOT безуспешно.Я могу понять, почему я получаю ошибку.

Answer 1

<kendo-grid-excel fileName="ProcessedMessageQueue.xlsx" [fetchData]="allData"></kendo-grid-excel>

Ошибка возникает из-за того, что функция allData передается компоненту kendo grid excel.allData выполняется внутри компонента кендо, и в этом контексте this больше не ссылается на компонент, для которого он предназначен.this вместо этого ссылается на компонент кендо, где queryService не определено.

В component.ts попробуйте это, я считаю, это будет работать:

public allDataProperlyBound: any = this.allData.bind(this);

Затем обновите сетку кендо Excel

<kendo-grid-excel fileName="ProcessedMessageQueue.xlsx" [fetchData]="allDataProperlyBound">

Ознакомьтесь с документами по .bind () для получения дополнительной информации.