Question

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

我的问题是，

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

angular2是否提供了相同的技术？

Answer 1

我一直在尝试动态创建和分页我的表，而不使用第三方库。围绕此愿望的一些考虑可能包括以下一些或更多：

每个表页面的项目数。您要用户指定它们还是硬编码？
处理点击事件，即首先，<>最后

以下我用来动态生成页码（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做到了这一点以及更多。

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

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

2 个答案: