如何从材料角度使用分页器? [英] 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 they will be automatically calculated upon view rendering.

希望可以帮到你.如果你成功了，请告诉我.=]

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

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