如何在angular2 rc5中集成排序和分页？答案

【问题标题】：How to integrate sorting and pagination in angular2 rc5?如何在angular2 rc5中集成排序和分页？
【发布时间】：2017-01-06 11:32:05
【问题描述】：

我正在尝试在 angular2 rc5 中集成排序和分页。 Pagination 与 ng2-pagination 一起工作，搜索排序。有什么好的排序例子吗？

【问题讨论】：

标签： sorting angular pagination

【解决方案1】：

如果有人仍在寻找答案（仅用于分页），此链接是一个有用的资源 -

Implementing Pagination in angular2 > v.RC5

我在获得上述链接后的 5 分钟内集成了它。

如果 - 链接不再可用，这里是步骤

app.module.ts

import {NgModule} from '@angular/core';
import {BrowserModule} from '@angular/platform-browser';
import {Ng2PaginationModule} from 'ng2-pagination'; // <-- import the module
imort {MyComponent} from './my.component';

@NgModule({
    imports: [BrowserModule, Ng2PaginationModule], // <-- include it in your app module
    declarations: [MyComponent],
    bootstrap: [MyComponent]
})
export class MyAppModule {}

app.component.ts

import {Component} from '@angular/core';

@Component({
    selector: 'my-component',
    template: `
    <ul>
      <li *ngFor="let item of collection | paginate: { itemsPerPage: 10, currentPage: p }"> ... </li>
    </ul>

    <pagination-controls (pageChange)="p = $event"></pagination-controls>
    `
})
export class MyComponent {
    public collection: any[] = someArrayOfThings;  
}

因此，对于服务器端分页，我们可以更改 pagination-controls 的这一行，替换一些自定义事件 -

此事件 (myCustomEvent($event)) 必须在组件类或您将用作引导程序的任何内容中定义和声明。

为了排序，请暂时原谅。

【讨论】：