angular6+zorro框架实现前台分页

angular6+(ng-zorro)框架实现前台分页

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-header',
  templateUrl: './app-header.component.html'
})
export class AppHeaderComponent implements OnInit {
  pageIndex = 1;
  pageSize = 5;
  dataSetList = [];
  dataSet = [
    { name: '123', price: 120, num: 3 },
    { name: '123', price: 120, num: 3 },
    { name: '123', price: 120, num: 3 },
    { name: '123', price: 120, num: 3 },
    { name: '444', price: 120, num: 3 },
    { name: '123', price: 120, num: 3 },
    { name: '123', price: 120, num: 3 },
    { name: '123', price: 120, num: 3 },
    { name: '123', price: 120, num: 3 },
    { name: '456', price: 120, num: 3 },
    { name: '123', price: 120, num: 3 }
  ];

  ngOnInit() {

  }
  searchData(): void {
    this.dataSetList = this.dataSet.slice((this.pageIndex - 1) * this.pageSize, (this.pageIndex) * this.pageSize);
  }

}

<div style="width:50%;margin:30px;">
  <nz-table #ajaxTable nzShowSizeChanger [nzFrontPagination]="true" [nzData]="dataSet" [(nzPageIndex)]="pageIndex" [(nzPageSize)]="pageSize"
    (nzPageIndexChange)="searchData()" (nzPageSizeChange)="searchData()">
    <thead>
      <tr>
        <th>名称</th>
        <th>单价</th>
        <th>数量</th>
        <th>总价</th>
      </tr>
    </thead>
    <tbody>
      <tr *ngFor="let data of dataSetList">
        <td>{{data.name}}</td>
        <td>{{data.price}}</td>
        <td>{{data.num}}</td>
        <td>{{data.price*data.num}}</td>
      </tr>
    </tbody>
  </nz-table>
</div>

运行结果：