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。通过执行建议的操作，可能对您有用：)祝您好运！

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

1 个答案: