如何在angular2 rc5中整合排序和分页?

时间:2016-08-30 09:03:46

标签: sorting angular pagination

我正在尝试在angular2 rc5中整合排序和分页。分页正在使用ng2-pagination,搜索排序。排序有什么好的例子吗?

1 个答案:

答案 0 :(得分:0)

如果有人仍在寻找答案(仅限于分页),此链接是一个有用的资源 -

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)),或者将其用作引导程序。

对于排序,请原谅我。