如何从材质角度使用paginator？

我是新来的角和尝试在我的应用程序中实现分页。我试图用这个组件如何从材质角度使用paginator？

https://material.angular.io/components/paginator/overview

与下面的代码，我可以得到长，页面大小，在我的.ts文件pageSizeoptions

的.html

<md-paginator [length]="length" 
       [pageSize]="pageSize" 
       [pageSizeOptions]="pageSizeOptions" 
</md-paginator>

.TS

export class PaginatorConfigurableExample { 

    length = 100; 
    pageSize = 10; 
    pageSizeOptions = [5, 10, 25, 100]; 

    } 
}

但我似乎无法触发一个函数来改变da当页面更改时，上表中的ta是否在上表中？另外，如何使用nextPage，previousPage，hasNextPage，hasPreviousPage方法？

来源

2017-07-26 HeisenBerg

检查此[plunker]（https://plnkr.co/edit/?p=preview）这可能会有所帮助。对于分页，你也可以使用这个库，我觉得它更简单[链接]（从“ngx-pagination”;）导入{NgxPaginationModule};我已经使用它[这里]（https://rahulrsingh09.github.io/AngularConcepts/ ＃/ comment） –

你确定你发布了正确的链接？ – HeisenBerg

对不起，但仍然不是正确的plunker，我认为，它打开https://plnkr.co/edit/?p=preview – HeisenBerg

我在这里挣扎着。但我可以告诉你我做了些什么研究。基本上，你第一次开始在foo.template.ts添加页面@Output事件：

<md-paginator #paginator 
       [length]="length" 
       [pageIndex]="pageIndex" 
       [pageSize]="pageSize" 
       [pageSizeOptions]="[5, 10, 25, 100]" 
       (page)="pageEvent = getServerData($event)" 
       > 
</md-paginator>

后来，你必须添加pageEvent属性在foo.component.ts阶级和他人办理分页程序要求：

pageEvent: PageEvent; 
datasource: null; 
pageIndex:number; 
pageSize:number; 
length:number;

，并添加将获取服务器数据的方法：

ngOnInit() { 
    getServerData(null) ... 
} 

public getServerData(event?:PageEvent){ 
    this.fooService.getdata(event).subscribe(
    response =>{ 
     if(response.error) { 
     // handle error 
     } else { 
     this.datasource = response.data; 
     this.pageIndex = response.pageIndex; 
     this.pageSize = response.pageSize; 
     this.length = response.length; 
     } 
    }, 
    error =>{ 
     // handle error 
    } 
); 
    return event; 
}

因此，基本上每次点击paginator时，都会激活getServerData（..）方法，该方法将调用foo.service.ts获取所有需要的数据。在这种情况下，您无需处理下一页和nextXXX事件，因为它将在视图呈现时自动计算。

希望这可以帮助你。让我知道你是否成功。 =]

来源

2017-08-15 00:45:14 aelkz

如何从材质角度使用paginator？

回答

相关问题