Kendo UI 可排序模板渲染不正确

Question

In this plunk 我有两个表，第一个使用*ngFor 显示数据，第二个显示相同的数据但使用kendo-sortable 和一个模板。 sortable 函数工作正常，但有两个问题。首先，所有数据都在第一列下方。其次，index 变量是undefined。任何想法如何解决这个问题？

@Component({
selector: 'my-app',
template: `
WITHOUT kendo-sortable
     <table border="1">
        <tr>
          <td><b>Index</b></td>
          <td><b>First Name</b></td>
          <td><b>Last Name</b></td>
        </tr>
        <tr *ngFor="let item of items; let i = index">
                <td style="width:50px">{{ i }}</td>
                <td style="width:100px">{{ item.firstName }}</td>
                <td style="width:100px">{{ item.lastName }}</td>
        </tr>
    </table>

<br><br>

WITH kendo-sortable
     <table border="1">
        <tr>
          <td><b>Index</b></td>
          <td><b>First Name</b></td>
          <td><b>Last Name</b></td>
        </tr>
        <kendo-sortable [data]="items">
            <ng-template let-item="item" let-rowIndex="i">
              <tr>
                <td style="width:50px">{{ i }}</td>
                <td style="width:100px">{{ item.firstName }}</td>
                <td style="width:100px">{{ item.lastName }}</td>
              </tr>
            </ng-template>
        </kendo-sortable>
    </table>
`,
encapsulation: ViewEncapsulation.None,

})
export class AppComponent {
  public items = [ {firstName: 'Joe', lastName: 'Don'},
                  {firstName: 'Jane', lastName: 'Dona'},
                  {firstName: 'Julius', lastName: 'Kent'}];
}

Answer 1

代码改了很多，看看这个：

import { Component } from '@angular/core';
import { products } from './products';
import { GridDataResult } from '@progress/kendo-angular-grid';
import { SortDescriptor, orderBy } from '@progress/kendo-data-query';

@Component({
    selector: 'my-app',
    template: `
        <kendo-grid [data]="gridView" [height]="530>
            <kendo-grid-column field="Index" title="Index" width="80"></kendo-grid-column>
            <kendo-grid-column field="FirstName" title="First Name"></kendo-grid-column>
            <kendo-grid-column field="LastName" title="Last Name" width="230"></kendo-grid-column>
      </kendo-grid>
  `
})
export class AppComponent {

    public gridView: GridDataResult;
    public products: any[] = products;

    constructor() {
        this.loadProducts();
    }

    private loadProducts(): void {
        this.gridView = {
            data: orderBy(this.products, this.sort),
            total: this.products.length
        };
    }
}

在这里，您在外部文件中定义产品并导入它们，this is the source for that。按照文档的建议去做，它可能对你有用:) 祝你好运！