angular 实现下拉列表组件的示例代码


Posted in Javascript onMarch 09, 2019

需求:

angular 实现下拉列表组件的示例代码

方案一

最开始就是用最简单的方法,前台请求数据,然后通过select和option在页面上显示,但是写了一会儿发现出现了许多类似下面的重复的代码

// 初始化年级选项
initGradeOptions() {
  this.gradeService.getAll().subscribe((res) => {
    this.gradeOptions = res;
  }, () => {
    console.log('get gradeOption error');
  });
}
<nz-select nzPlaceHolder="请选择所属年级" formControlName="grade">
  <nz-option *ngFor="let grade of gradeOptions" [nzLabel]="grade.name"
       [nzValue]="grade"></nz-option>
</nz-select>

每写一个列表都要写请求它的数据的方法和模板中的内容,非常繁琐。

方案二

因为在项目中,不止一个地方用到了这样的列表,所以就想着把这些列表单独拿出来,写成组件。
这里就参考了朴世超组长的angular的输入与输出写了这个组件
思路大概如下:

angular 实现下拉列表组件的示例代码

ts:

@Input() defaultValue: Grade;            // 选中的值
@Output() selected = new EventEmitter<number>();  // 输出属性
datas: Grade[];                   // 所有数据

constructor(private gradeService: GradeService) {
}

// 请求所有的数据
ngOnInit() {
  this.gradeService.getAll().subscribe((res) => {
    this.datas = res;
  }, () => {
    console.log('error');
  });
}

// 当则内容更改时,将已选中对象的id弹射到父组件绑定的事件上
dataChange() {
  this.selected.emit(this.defaultValue);
}

html:

<nz-select nzPlaceHolder="所属年级" class="wide" [(ngModel)]="defaultValue" (ngModelChange)="dataChange()">
<nz-option *ngFor="let data of datas" [nzLabel]="data.name"
      [nzValue]="data"></nz-option>
 </nz-select>

ps: 默认选中的功能还在完善,待更新

思考

当我照着上面的套路继续写collegeList,majorList,klassList,以后还会有teacherList,studentList等等,这样不也形成了很多重复的代码吗?

于是我就想能不能设计一个组件:

我让它是什么列表,它就是什么列表。

然后我就寻找这几个组件的共性,发现它们请求数据的的特点:

  • 都是使用get请求
  • 返回的数据都是数组
  • url只有最后一项不同

那么,我只要传给组件一个url数组,就能根据url请求对应的数据,再生成相应的模板

方案三(失败)

angular 实现下拉列表组件的示例代码

angular 实现下拉列表组件的示例代码

子组件ts:

@Input() urls: String[][] = [];         // 保存传递过来的url
datas: String[][] = [];             // 保存查询结果
@Input() titles: String[][] = [];        // 保存提示语句
@Output() selectItems = new EventEmitter();   // 已选中的对象
index = 0;
items = [];

constructor(public dataService: DataService) {
}


ngOnInit() {
  this.getData(this.index);
}

getData(index: number): void {
  if (index < this.urls.length) {
    const url = this.urls[index];
    this.dataService.getAllData(url).subscribe((res) => {
      this.datas[index] = res;
      console.log(this.datas);
    }, () => {
      console.log('error');
    });
  }
}

dataChange(i: number) {
  console.log(this.items);
  this.selectItems.emit(this.items);
  this.getData(i + 1);
}

子组件html:

<nz-select [nzPlaceHolder]="titles[i]"
    style="width: 150px;"
    (ngModelChange)="dataChange(i)"
    [(ngModel)]="items[i]"
    *ngFor="let url of urls,let i = index">
<nz-option *ngFor="let item of datas[i]" [nzValue]="item" [nzLabel]="item.name">    
</nz-option>
</nz-select>

父组件ts:

url = ['Grade', 'College', 'Major'];
titels = ['年级', '学院', '专业'];

getSelectItems(event) {
  console.log(event);
}

父组件html:

<app-grade-list 
    [urls]="url" 
    [titles]="titels" 
    (selectItems)="getSelectItems($event)">
    </app-grade-list>

效果:

angular 实现下拉列表组件的示例代码

看起来还能用,但是再往后写就发现这样写有致命的缺陷。

  • 每一个下拉框都是根据url生成的,使用时需要查找url
  • 传给父组件的数据不知道数据与实体的对应关系
  • 当存在级联时,使用该方案难度高,且不易维护

总结

虽然这些下拉列表有一定的共性,并且可以抽象出一些公共的功能来实现,但本身设计略复杂,且使用效果并不好,最后还是放弃了第三个方案。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
分享14个很酷的jQuery导航菜单插件
Apr 25 Javascript
jQuery EasyUI API 中文文档 - ValidateBox验证框
Oct 06 Javascript
一个简单的jQuery插件ajaxfileupload.js实现ajax上传文件例子
Jun 26 Javascript
Node.js中的事件驱动编程详解
Aug 16 Javascript
浅谈Sizzle的“编译原理”
Apr 14 Javascript
jquery mobile 移动web(5)
Dec 20 Javascript
AngularJs动态加载模块和依赖注入详解
Jan 11 Javascript
JS表单验证的代码(常用)
Apr 08 Javascript
JavaScript代码实现左右上下自动晃动自动移动
Apr 08 Javascript
JavaScript事件学习小结(一)事件流
Jun 09 Javascript
JavaScript实现广告弹窗效果
Aug 09 Javascript
vue.js的安装方法
May 12 Javascript
Node.js动手撸一个静态资源服务器的方法
Mar 09 #Javascript
深入理解使用Vue实现Context-Menu的思考与总结
Mar 09 #Javascript
vue模块拖拽实现示例代码
Mar 09 #Javascript
Vue中的验证登录状态的实现方法
Mar 09 #Javascript
在NPM发布自己造的轮子的方法步骤
Mar 09 #Javascript
使用pm2部署node生产环境的方法步骤
Mar 09 #Javascript
Koa日志中间件封装开发详解
Mar 09 #Javascript
You might like
DOM XPATH获取img src值的query
2013/09/23 PHP
php中unserialize返回false的解决方法
2014/09/22 PHP
php之static静态属性与静态方法实例分析
2015/07/30 PHP
PHP堆栈调试操作简单示例
2018/06/15 PHP
PHP CURL使用详解
2019/03/21 PHP
基于Jquery实现的一个图片滚动切换
2012/06/21 Javascript
Underscore.js常用方法总结
2015/02/28 Javascript
jquery实现根据浏览器窗口大小自动缩放图片的方法
2015/07/17 Javascript
jquery中object对象循环遍历的方法
2015/12/18 Javascript
JavaScript将DOM事件处理程序封装为event.js 出现的低级错误问题
2016/08/03 Javascript
js实现短信发送倒计时功能(正则验证)
2017/02/10 Javascript
利用imgareaselect辅助后台实现图片上传裁剪
2017/03/02 Javascript
微信小程序之裁剪图片成圆形的实现代码
2018/10/11 Javascript
Vue在 Nuxt.js 中重定向 404 页面的方法
2019/04/23 Javascript
JS判断数组是否包含某元素实现方法汇总
2020/06/24 Javascript
[02:11]完美世界DOTA2联赛10月28日赛事精彩集锦:来吧展示实力强劲
2020/10/29 DOTA
python实现遍历文件夹修改文件后缀
2018/08/28 Python
django配置连接数据库及原生sql语句的使用方法
2019/03/03 Python
python频繁写入文件时提速的方法
2019/06/26 Python
Python实现FTP文件传输的实例
2019/07/07 Python
Python 迭代,for...in遍历,迭代原理与应用示例
2019/10/12 Python
python 循环数据赋值实例
2019/12/02 Python
用Python进行websocket接口测试
2020/10/16 Python
详解CSS3 用border写 空心三角箭头 (两种写法)
2017/09/29 HTML / CSS
英国鲜花速递:Serenata Flowers
2018/04/03 全球购物
美国儿童服装、家具和玩具精品店:Maisonette
2019/11/24 全球购物
Javascript如何发送一个Ajax请求
2015/01/26 面试题
.NET面试问题集
2015/12/08 面试题
制药工程专业毕业生推荐信
2013/12/24 职场文书
《恐龙》教学反思
2014/04/27 职场文书
国际会计专业求职信
2014/08/04 职场文书
2015年八一建军节慰问信
2015/03/23 职场文书
《窃读记》教学反思
2016/02/18 职场文书
MYSQL(电话号码,身份证)数据脱敏的实现
2021/05/28 MySQL
Python制作表白爱心合集
2022/01/22 Python