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>

執行結果：