Question

我正在尝试将一个Excel导出按钮添加到Kendo UI网格中。单击按钮后，我不断收到以下错误“ TypeError：无法读取未定义的属性'queryService'”。我正在将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在kendo组件中执行，在这种情况下，this不再引用它打算使用的组件。 this会引用未定义queryService的kendo组件。

在component.ts中尝试一下，我相信它会起作用：

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

然后更新kendo grid excel

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

查看.bind()上的文档以了解更多信息。

收到TypeError：无法读取未定义的属性'queryService'

1 个答案: