angular6 实现前台分页

angular6 实现前台分页（纯js，无样式）

import { Component, OnInit } from '@angular/core';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
//假数据
  tableList = [
    { 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: '123', price: 120, num: 3 },
    { name: '123', price: 120, num: 3 }
  ];
  tablePageList = [];  //分页后前台显示数据
  pageNo = 1; //当前页码
  preShow = false; //上一页
  nextShow = true; //下一页
  pageSize = 5; //单页显示数
  totalCount = 0; //总页数
  pageSizes = [5, 10, 15]; 
  curPage = 1; //当前页
  
  ngOnInit() {
    this.getPageList();
  }
  getPageList() {
    if (this.tableList.length >= 1) {
      if (this.tableList.length % this.pageSize === 0) {
        this.pageNo = Math.floor(this.tableList.length / this.pageSize);
      } else {
        this.pageNo = Math.floor(this.tableList.length / this.pageSize) + 1;
      }
      if (this.pageNo < this.curPage) {
        this.curPage = this.curPage - 1;
      }
      if (this.pageNo === 1 || this.curPage === this.pageNo) {
        this.preShow = this.curPage !== 1;
        this.nextShow = false;
      } else {
        this.preShow = this.curPage !== 1;
        this.nextShow = true;
      }
    } else {
      this.tableList.length = 0;
      this.pageNo = 1;
      this.curPage = 1;
    }
    this.tablePageList = this.tableList.slice((this.curPage - 1) * this.pageSize, (this.curPage) * this.pageSize);

  }
  //点击上一页方法
  showPrePage() {
    this.curPage--;
    if (this.curPage >= 1) {
      this.getPageList();
    } else {
      this.curPage = 1;
    }
  }
//点击下一页方法
  showNextPage() {
    this.curPage++;
    if (this.curPage <= this.pageNo) {
      this.getPageList();
    } else {
      this.curPage = this.pageNo;
    }
  }
//自定义跳页方法
  onChangePage(value) {
    if (value > this.pageNo) {
      confirm('超出最大页数');
    } else if (value <= 0) {
      this.curPage = 1;
      this.getPageList();
    } else {
      this.curPage = value;
      this.getPageList();
    }
  }
  //改变每页显示方法
  onChangePageSize(value) {
    this.pageSize = value;
    this.curPage = 1;
    this.getPageList();
  }
  
}

<table border="1">
    <thead>
        <tr>
            <th class="text-center">名称</th>
            <th class="text-center">单价</th>
            <th class="text-center">数量</th>
            <th class="text-center">总价</th>
        </tr>
    </thead>
    <tbody>
        <tr *ngFor="let list of tablePageList">
            <td>{{list.name}}</td>
            <td>{{list.price}}</td>
            <td>{{list.num}}</td>
            <td>{{list.price*list.num}}</td>
        </tr>
    </tbody>
</table>
<div>
    <button type="button" [disabled]="!preShow" (click)="showPrePage()">上一页</button>
    <input type="text" (change)="onChangePage($event.target.value)" placeholder="{{curPage}}" value="{{curPage}}">
    <span> / {{pageNo}} 页</span>
    <button type="button" [disabled]="!nextShow" (click)="showNextPage()">下一页</button>
    <span> 每页显示 : </span>
    <select (change)="onChangePageSize($event.target.value)">
        <option *ngFor="let pageSize of pageSizes" value="{{pageSize}}">{{pageSize}}</option>
    </select>
</div>
<span>共{{tablePageList.length}}条</span>