[西安|荣耀师兄]JS-侯升|2019年10月21日的日报-技能树.IT修真院

发表于： 2019-10-21 20:18:46

1 747

今天完成的事情：

今天学习了使用ngzerro的分页组件，同时完成组件控制列表变化。内置管道以及自定义管道的使用

明天计划的事情：把新增列表添加上

遇到的问题：

pagination分页组件的使用过程中有个下拉框，一点击就出现在屏幕外面了。最后查到原因是没有引入ng-zorro的基础样式文件，在style中引入全局的基础样式就好了

收获：

      <td>{{list.type | strLength}}</td>

自定义管道：

新建一个pipe.ts文件

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'strLength'
})
export class StrLengthPipe implements PipeTransform {

  transform(value:any): any {
    if (value == 0) {
    value ='首页banner'
    }
    if (value == 1) {
    value ='找精英banner'
   }
    if (value == 2) {
    value ='行业大图'
  }
    if (value == 3) {
    value ='找职位banner'
  }
  return value;
  }

}

这里的list.type的值分别对应4中类别，通过管道把类别名字展示出来、

 [nzPageSizeOptions]= "[10,20,30]"

[nzPageSizeOptions]默认值是【10,20,30，40】这里因为总数据也就26个，所以设置为【10,20,30】

  page(event){
    let params = {
      page:event
    }
    console.log("页面改变",event)
    this.article.getData(params).subscribe((res:any)=>{
      console.log(res)
      if(res.code == 0 ){
        this.articleList = res.data.articleList
      }
    })
  }

  pageSize(event){
    console.log(event);
    let params = {
      size:event,
    }
    this.article.getData(params).subscribe((res:any)=>{
      console.log(res)
      if(res.code == 0 ){
        this.articleList = res.data.articleList
      }
    })
  }

这里通过页码变化和每页展示数目的回调来处理展示数据

这里打印event就可以打印对应事件的详情，这里后台按条件搜索数据，展示在页面上

返回列表

【任务2】 [西安|荣耀师兄]JS-侯升 | 2019年10月21日 的日报 中品

评论

分享到

【任务2】 [西安|荣耀师兄]JS-侯升 | 2019年10月21日的日报中品