angular2项目里使用ng-zorro的分页组件

前提：

我使用的是angular-cil作的项目
组件库用的是ng-zorro

实现的效果是：
显示总条数、可跳转到其余页（两个按钮一样有效）、可改变每页条数

具体步骤以下：

一、使表格的分页隐藏，避免重复

（我用的使表格，大家能够使用其余的，这一步可省略）
主要是：[nzShowPagination]='false'

<nz-table #borderedTable nzBordered [nzShowPagination]='false' [nzData]="[{}]" >……</nz-table>

二、使用分页组件

使用ng-zorro里的这个组件模板

html里：

<!-- 
                nzPageIndex:当前展现的是第几页（数据绑定）
                nzShowTotal:显示总条数的模板（用于显示数据总量和当前数据范围）
                nzTotal：共多少条数据  （数据绑定）
                nzPageSize：每页几条数据，可双向绑定
                nzShowSizeChanger	是否能够改变 nzPageSize 默认是false。有了这个，能够改变每页显示条数（十、20……）
              nzPageSizeOptions：指定每页能够显示多少条10，20，30……（不用写，有默认值，测试时能够写）
                (nzPageSizeChange)： 每页条数改变的回调
                (nzPageIndexChange):	页码改变的回调
                
            -->
 <nz-pagination [nzShowTotal]="totalTemplate" [nzPageIndex]="page" [nzTotal]=total nzShowSizeChanger  (nzPageSizeChange)="nzPageSizeChange($event)" (nzPageIndexChange)="nzPageIndexChange($event)"></nz-pagination>
 <ng-template #totalTemplate let-total> 共 {{ total }} 条 </ng-template>

ts文件：

export class XiayigeComponent implements OnInit {
	// 数据总条数（没有设置初始值的话，分页不显示）
	  public total: any = 1;
	  // 当前页
	  public page: any = 1;
	  // 每页行数     
	  public MaxResultCount: any = 10;
	  // 跳转数量    skipCount=page*MaxResultCount 等于跳转页数*每页几条(这个是请求数据时要用的)
	  public SkipCount: any = 0;

	// 生命周期函数
	ngOnInit(): void {
	// 调用请求表格数据的函数
	    this.getSource();
	}
	
		// 请求表格数据的接口函数
		// 有token验证就加，没有就去掉headers，params是请求接口时要传递的参数
		  getSource() {
		    this.http.get<string> ( apiUrl + '/ProjectRepair/GetContractCompanys', {
		      headers: {
		        Authorization: 'Bearer ' + this.token,
		      },
		      params: {
		        MaxResultCount: this.MaxResultCount,
		        SkipCount: this.SkipCount,
		      }
		    }).subscribe((res: any) => {
		      this.source = res.result.items;
		      console.log(this.source);
		      this.total = res.result.totalCount;
		    });
		  }

		 // 每页条数发生改变时的回调
		  nzPageSizeChange(newSise) {
		    this.MaxResultCount = newSise;
		    this.getSource();
		  }
		  // 跳转到其余页时的回调
		  nzPageIndexChange(size) {
		    // console.log(size);
		    this.page = size;
		    // 这里必须减1
		    this.SkipCount = (size - 1) * this.MaxResultCount;
		    this.getSource();
		  }

}