tab页：ng-zorro-antd使用后台分页，获取数据、渲染数据

后台分页

1、获取栏目名称
2、通过栏目名称获取数据
3、点击栏目切换数据
4、点击分页切换数据

html代码

<!--获取栏目名称 -->
<ul class="tabs d-flex">
          <li *ngFor="let item of columns;let i=index" (click)="activeColumnIndex=i; handleMouseoverTab(item)"
            [class.active]="activeColumnIndex===i">
            <a>{{item.name}}</a>
          </li>
</ul>

<!--获取对象栏目下的内容 -->
<div class="news-list p-3 pl-4">
        <ul class="news-list-ul">
          <li *ngFor="let content of contents; let i = index">
                <a target="_blank" [routerLink]="'/home-list/GroupNewscontent/content?.id'"
                  [queryParams]="{contentId:content?.id,index:i,columnId:columnId}"
                  (click)="addClicks(content?.id,i,columnId)">
                  {{content.title}}
                </a>
          </li>
       </ul>
</div>

<!--ng-zorro-antd分页 -->
<nz-pagination [nzPageIndex]="page" [nzTotal]="total" [nzPageSize]="MaxResultCount"
      (nzPageIndexChange)="nzPageIndexChange($event)"></nz-pagination>
<!--
* [nzPageIndex] 当前页数，可双向绑定
* [nzPageSize] 每页条数 ，可双向绑定
* (nzPageIndexChange) 页码改变的回调
-->

ts代码

//分页相关
//page:点击是处于第几页，pageIndex：分页索引，MaxResultCount：每页显示列表的数量
  page = 1
  pageIndex: number = 0;
  MaxResultCount: any = 4;
  // 跳转数量    skipCount=page*MaxResultCount 等于跳转页数*每页几条(这个是请求数据时要用的)
  SkipCount: any = 0;

ngOnInit() {
    this.activeColumnIndex = 0
    this.getColumn()
  }

获取tab页内容

//通过库名称获取tab页的内容
  getColumn() {
    this.api.getColName(‘XW’).subscribe((res: any) => {
      this.columns = res
      //页面初始化默认默认选中的栏目
      this.colName = res[0]
      /*activecolumn是选中的栏目
       * 如果activecolumn没有值的话，加载完页面点分页是获取不到数据的
      */
      this.activecolumn = this.columns[this.activeColumnIndex]
      //界面初始化显示的默认栏目下的内容，为什么写这里？因为写ngOnInit里获取不到值，执行顺序的事，未找到解决办法   
      this.getData(this.colName)
      this.cd.detectChanges()
    })
  }

获取列表中的数据

//获取列表下的数据
  getData(column) {
    this.api.getDataByCode(column.code, this.page, this.MaxResultCount).subscribe((res: any) => {
    //total取的是res中的total，是全部数据
    this.total = res.total
      this.contents = res.data;
      this.cd.detectChanges()
    })
  }

点击切换列表数据

//鼠标经过的事件
  handleMouseoverTab(column) {
    //当前选中的tab
    this.activecolumn = column
    //当tab页切换时将分页初始化为第一页,nzPageIndexChange()已经有getData()所以无需再写一次getData()
    this.nzPageIndexChange(1)
    this.page = 1
    this.pageIndex = 1
  }

点击页码改变列表数据

//页码改变的回调
  nzPageIndexChange(size) {
    this.pageIndex = size - 1;    
    this.page = size;    
    // 这里必须减1
    this.SkipCount = (size - 1) * this.MaxResultCount;    
    this.getData(this.activecolumn)
  }

做出来的页面展示