angular - 如何从 Material Angular 使用分页器？

Question

我是 Angular 的新手，正在尝试在我的应用中实现分页。我正在尝试使用 this material component.

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

<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 方法？

Answer 1

我在这里遇到同样的问题。但我可以告诉你我做了一些研究。 基本上，您首先开始在 foo.template.ts 中添加页面 @Output 事件:

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

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

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

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

希望对您有所帮助。如果你成功了，请告诉我。 =]