[武汉|结业弟子]JS-刘平|2019年10月24日的日报-技能树.IT修真院

发表于： 2019-10-24 19:31:15

1 803

Angular从后台请求到的数据进行分页

由于从后台请求到了几十条数据，而系统设置的是每页显示10条，所以这里我们需要设置分页功能来完成完整分页数据的获取

1.使用antd组件库中的table组件，查看api，将

[nzFrontPagination]="false"

以及分页组件中的

[nzTotal]="totalNum" [nzSize]="sizeNum" (nzPageIndexChange)="change($event)"

以上的totalNum和sizeNum是数据绑定，change($event)是页码改变是就会触发的回调函数，接下来再ts文件中定义它们

  public totalNum:any;
  public sizeNum:any;

以下是一个回调函数，这里的e就是点击后的页码的值，定义一个对象pageObj，调用getTable来获取点击页码的页面的数据

  change(e){
    console.log(e)
    let pageObj = {
      page:e
    }
    this.getTable(pageObj)
  }

2.上面的getTable方法中我们传参了，但是定义这个方法的时候是没有定义为有参参数的，所以这里要修改之前的getTable方法，并在方法中将获取到的数据总数total以及每页展示数量size传递过来

  getTable(params?){
    this.ser.getData(params).subscribe((res:any)=>{
      console.log(res)//这里的res是从后台接受的返回参数
      this.bbb = res.data.articleList;
      this.totalNum = res.data.total;
      this.sizeNum = res.data.size;
    })
  }

上面括号中的paprams？代表可以传参也可以不传参，？是必须的，这是es6的写法

3.然后我们再到service文件中定义一个获取接口数据的方法

  getData(cs?){
    return this.http.get(
      this.geturl,{params:cs}
    )
  }

同理，这里的参cs？也是代表可以选择传参，get方法本身是至少有两个参数的，点进去可以发现，除了传递请求地址外，还需要传递一个对象参数，这个参数可以理解为获取数据时的筛选条件，如果不写，就是获取到了所有的数据

最终页面如下，可以点击分页获取每一页的数据

返回列表

【任务6】 [武汉|结业弟子]JS-刘平 | 2019年10月24日 的日报 中品

评论

分享到

【任务6】 [武汉|结业弟子]JS-刘平 | 2019年10月24日的日报中品