首页 > 解决方案 > angular5-data-table 错误与分页和排序

问题描述

我将 angular5-data-table 与我的 angular 5 应用程序一起使用。(https://www.npmjs.com/package/angular5-data-table

这是我的代码

    <div class="col-md-12">
      <data-table id="my-table"
            title = "Test Table"
            [items] = "testData"
            [itemCount] = "testCount"
            [expandableRows]="true"
            [substituteRows]="false"
            [sortAsc]="true"
            [limit]=10
      >
            <data-table-column
                  [property]="'name'"
                  [header]="'Name'"
                  [sortable]="true">
            </data-table-column>
            <data-table-column
                  [property]="'age'"
                  [header]="'Age'"
                  [sortable]="true">
            </data-table-column>
      </data-table>
</div>

这是我的输出

在这里,我将行数限制设置为 10。但它显示了所有数据。在表的底部结果是说'1 到 10 of 12',但它显示了所有行。它也不支持排序。

Angular CLI:1.7.4 节点:8.11.1 操作系统:win32 x64 Angular:5.2.10

标签: angular5angular-datatables

解决方案


处理数据表中的重新加载事件

在您的 HTML 中

<data-table (reload)="reloadItems($event)">

在您的组件中

reloadItems(params){
    if(!this.tableResource) return;
    this.tableResource.query(params).then(items => this.items = items);
}

推荐阅读