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

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

我的问题是,

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

---

angular2是否提供了实现相同功能的技术？

angular2没有内置的表格排序方法。您必须自己连接表头中的事件，或者使用第三方组件。Priming可以做到这一点，甚至更多

更新：

---

如果您想自己做这件事，那么“过滤器”（角度1）的等价物是角度2中的管道。这里有一个很好的指南：

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

每个表页的项目数。您希望用户指定它们还是硬连线

处理点击事件，即第一次、最后一次

我使用以下代码动态生成页码（P2，…，Pn）

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

页码：

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>';
}

workingWithLoop（页码）{
//让PageNumber=''；
console.log（this.pagenumber）；
console.log（'总页数：'+页数）；
对于（设n=2；n'；
}
//tslint:禁用下一行：最大行长度
this.pagenumbers+='
»；Next
Last
；
}

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

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

---

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

到目前为止您尝试了什么？我有我的*ngFor循环，我正在使用普通和标记构造表。我想在菜单上添加按钮，连接click事件进行排序，然后重建整个表。但这听起来很乏味，因此需要帮助。希望对您有所帮助

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