如何从materialAngular使用分页器

发布于08月15日

我是angular的新手，正在try 在我的应用程序中实现分页.我试着用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方法？

推荐答案

我在这里也在为同样的问题而苦苦挣扎.不过，我可以给你看看我做了些什么研究. 基本上，您首先在foo.template.ts中开始添加page@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;
}

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

我希望这能帮助你.如果你成功了，请告诉我.=]