解决angular11+zorro用nz-pagination PageSize PageIndex 绑定失效问题（分页失效问题）

tangdou369098655

于 2021-10-15 00:46:31 发布

阅读量1k

点赞数

分类专栏： angular

本文链接：https://blog.csdn.net/tangdou369098655/article/details/120770219

版权

angular 专栏收录该内容

21 篇文章

订阅专栏

本文档中提到的问题是关于Angular应用中分页功能出现的异常情况。尽管文档表明nzPageSize和nzPageIndex支持双向绑定，但在获取数据后，页码并未正确更新。解决方案在于，在获取数据并赋值给列表和总条数之后，需要手动设置page对象的current和pageSize属性，以确保分页信息的正确显示。通过这种方法，可以修复分页失效的奇葩问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

今天遇到一个很奇葩的问题，看文档写的nzPageSizenz PageIndex是支持双向绑定的，但是获取数据以后，页码还是没变回正常的，解决方案如下：

关于分页失效：主要代码是获取数据以后重新赋值一下

async getTable(params) {
    // const res4: any = await this.myHttpRes('post', this.baseUrl + '/testData', params, false);
    // if (res4 && res4.success) {
    //   this.msgSrv.success(res4.msg ? res4.msg : 'Get Data Success!')
    //   this.listOfData = res4.data.tableData
    //   this.page.total = res4.data.total
    //   console.log(this.listOfData)
    // } else {
    //   this.msgSrv.error(res4 && res4.msg ? res4.msg : 'Get Table Data Fail!')
    // }

    // 模擬數據
    console.log('第几頁：',params.cur_page)
    console.log('每頁條數：',params.page_size)
    let newArr = []
    newArr = new Array(params.page_size).fill({}).map((_, i) => _ = {
      item01: i + 1 + (params.cur_page - 1) * 10,
      item02: 0.01 * (i + 1),
      item03: i + 10 + '數據',
      item04: i + 100 + '數據',
      item05: i + 1000 + '數據',
      item06: i + 10000 + '數據',
    })
    this.listOfData = newArr
    this.page.current = params.cur_page // 解決奇葩的問題
    this.page.pageSize = params.page_size // 解決奇葩的問題
    this.page.total = 500
  }

在这里插入图片描述