Telerik Kendo UI Grid 自定义 Excel 导出

Question

我有一个用于 Angular 2 的 Kendo UI Grid，它可能包含大量数据。因此，我使用了一个包含计数的 API 调用并将数据放入分页网格中。当我单击“导出到 Excel”按钮时，它只返回显示的数据。我希望能够导出整个数据集。

我认为我应该使用 fetchData 方法并将其包含在网格中，如下所示：

<kendo-grid-excel fileName="MyExport.xlsx" [fetchData]="allResults"></kendo-grid-excel>

但是，allResults 方法必须返回 ExcelExportData 对象。我对 API 的方法调用返回一个 observable，然后对其进行解析。我尝试在订阅事件中返回数据，但它给了我一个 TypeScript 错误，该方法必须返回一个值。如果我将返回类型更改为“any”，则在外部应用过滤器时调用“this”会失败。

这是我当前的获取方法：

allResults(): ExcelExportData {
    if (!this.sort.length) {
        this.sort.push({ field: undefined, dir: undefined });
    }

    this.myService.resultsGet(
        this.filters.date,
        ...
        undefined,  // skip
        undefined,  // take
        this.sort[0].field,
        this.sort[0].dir
    ).subscribe(
        (pagedList: any) => {
            for (let item of pagedList.results) {
                // manipulate a few things here
            }
            return { data: pagedList.results };
        },
        e => { console.log(`error: ${e}`); }
    );
}

有没有什么方法可以设置它以使用角度组件过滤器进行外部 API 调用并通过订阅返回数据？

提前致谢！

Answer 1

看起来有两件事发生：

• this undefined：fetchData 没有在你的组件实例的上下文中调用，所以需要你自己绑定

  this.allResults = this.allResults.bind(this);
  

• 返回值：假设你的服务是从服务器获取的，你需要返回一个promise或者一个observable给fetchData，所以你不想要subscribe()，你想要地图()

把它们放在一起，你会得到这样的东西：

   constructor(
     public myService: MyService
   ) {
     this.allResults = this.allResults.bind(this);
   }

   allResults() {
     if (!this.sort.length) {
      this.sort.push({ field: undefined, dir: undefined });
     }

      this.myService.resultsGet(
        this.filters.date,
        ...
        0,  // skip
        undefined,  // take
        this.sort[0].field,
        this.sort[0].dir
      ).map(response => {
        // manipulate a few things here
        return <GridDataResult> {
          data: response.value,
          total: response.count
      }
    }

更新：这是一个基于 Telerik 的示例的 plunker。

excel export plunker