如何从物料角度使用分页器? [英] How to use paginator from material angular?

问题描述

我是不熟悉Angular并试图在我的应用程序中实现分页.我正在尝试使用此材料组件.

I'm new to angular and trying to implement pagination in my app. I am trying to use this material component.

使用下面的代码，我可以在我的.ts文件中获取length，pagesize和pageSizeOptions

With the code below, I can get length, pagesize, and pageSizeOptions in my .ts file

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

export class PaginatorConfigurableExample {

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

  }
}

但是当页面更改时，我似乎无法触发函数来更改上表中的数据.另外，如何使用nextPage，previousPage，hasNextPage和hasPreviousPage方法?

but I can't seem to trigger a function to change the data on the table above when the page is changed. Also, how do I use the nextPage, previousPage, hasNextPage, and hasPreviousPage methods?

推荐答案

在这里，我一直在努力.但我可以向您展示我所做的一些研究. 基本上，您首先开始在 foo.template.ts 中添加页面@Output事件:

I'm struggling with the same here. But I can show you what I've got doing some research. Basically, you first start adding the page @Output event in the foo.template.ts:

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

然后，您必须在 foo.component.ts 类中添加 pageEvent 属性，并添加其他属性来处理分页器要求:

And later, you have to add the pageEvent attribute in the foo.component.ts class and the others to handle paginator requirements:

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

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

And add the method that will fetch the server data:

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

因此，基本上，每次您单击分页器时，您都会激活getServerData(..)方法，该方法将调用 foo.service.ts 获得所需的所有数据.在这种情况下，您不需要处理 nextPage 和 nextXXX 事件，因为事件将在视图渲染时自动计算.

So, basically every time you click the paginator, you'll activate getServerData(..) method that will call foo.service.ts getting all data required. In this case, you do not need to handle nextPage and nextXXX events because it will be automatically calculated upon view rendering.

希望这可以为您提供帮助.让我知道你是否成功. =]

Hope this can help you. Let me know if you had success. =]

这篇关于如何从物料角度使用分页器?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！