Angular2 - 使用 *ngFor 进行分页和排序的表答案

【问题标题】：Angular2 - Table using *ngFor with paging and sortingAngular2 - 使用 *ngFor 进行分页和排序的表
【发布时间】：2017-06-10 22:22:54
【问题描述】：

我正在 Angular 2 中使用 *ngFor 创建一个简单的 html 表。

我的问题是，

是否有一种简单的方法可以在不使用任何其他第三方 JavaScript 的情况下将排序和分页添加到同一个表？

angular2 是否提供任何技术来实现相同的目标？

【问题讨论】：

到目前为止你尝试了什么？
我有我的 *ngFor 循环，我正在使用普通的和标签构建表格。我想在上添加按钮并连接 click 事件以进行排序，然后重建整个表格。但这听起来很乏味，因此寻求帮助。

标签： sorting angular html-table paging ngfor

【解决方案1】：

我一直在尝试在不使用 3rd 方库的情况下以角度动态构建和分页我的表格。围绕这一愿望的一些考虑可能包括以下一些或更多：

每个表页的项目数。您希望用户指定它们还是硬编码？
处理点击事件，即第一个，最后一个

以下代码我用来动态生成页码(P2,...,Pn)

声明一个变量（pagenumbers）来保存页码HTML

pagenumbers = '<li class="page-item disabled clearfix d-none d-md-block"><a class="page-link waves-effect waves-effect">First</a></li><li class="page-item-disabled"><a class="page-link" aria-label="Previous"><span aria-hidden="true">&laquo;</span><span class="sr-only">Previous</span></a></li><li class="page-item active"><a class="page-link">1</a></li>';

调用服务获取客户列表：

async getCustomerOrders(CustomerID: number, customerService: CustomerService) {
    await customerService.getCustomerOrders(CustomerID)
    .map((res) => res)
    .subscribe(
        data => {
            this.customerOrders = data;
            this.tot = this.customerOrders.length;
            console.log('Total records: ' + this.tot);
            this.workingWithLoop(this.tot / 10);
        },
        err => console.log(err),
        () => console.log(this.customerOrders.length / 10)
    );
}

页码：

workingWithLoop(pages: number) {
    // let pageNumbers = '';
    console.log(this.pagenumbers);
    console.log('Total pages: ' + pages);
        for (let n = 2; n < pages; n++ ) {
            console.log('Value of n: ' + n);
            this.pagenumbers += '<li class="page-item"><a class="page-link waves-effect waves-effect">' + n + '</a></li>';
    }
    // tslint:disable-next-line:max-line-length
    this.pagenumbers += ' <!--Arrow right--><li class="page-item"><a class="page-link" aria-label="Next"><span aria-hidden="true">&raquo;</span><span class="sr-only">Next</span></a></li><!--First--><li class="page-item clearfix d-none d-md-block"><a class="page-link">Last</a></li>';
}

在我的 html 中，使用表格底部的以下代码作为页码

<nav class="my-4 pt-2">
            <ul class="pagination pagination-circle pg-purple mb-0" [innerHTML]="pagenumbers">
            </ul>
        </nav>

我仍在努力动态生成分页表。

【讨论】：

做进一步的研究我发现下面的文章by O. Nasri 对创建分页表非常有用。希望对您有所帮助

【解决方案2】：

Angular 没有内置的表格排序方式。您要么必须自己在表头中连接事件，要么使用第三方组件。 PrimeNG 不仅可以做到这一点。

更新： 如果您想自己执行此操作，则“过滤器”（Angular 1）的等价物是 Angular 2 中的管道。这是很好的指南：http://voidcanvas.com/angular-2-pipes-filters/

【讨论】：