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

Question

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

我的问题是，

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

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

Answer 1

我一直在尝试在不使用第三方库的情况下以 angular 动态构建和分页我的表。 围绕此愿望的一些注意事项可能包括以下一些或多项：

1. 每个表页的项目数。 您希望用户指定它们还是硬线？
2. 处理点击事件，即第一个、<>最后一个

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

声明一个变量（页码）来保存页码 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>

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

Answer 2

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

更新：如果你想自己做这件事，相当于"过滤器"（Angular 1）是Angular 2中的管道。这是一个很好的指南：http://voidcanvas.com/angular-2-pipes-filters/