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 相关文章推荐
AutoSave/自动存储功能实现
Mar 24 Javascript
基于jquery的超简单上下翻
Apr 20 Javascript
Javascript笔记一 js以及json基础使用说明
May 22 Javascript
jquery利用event.which方法获取键盘输入值的代码
Oct 09 Javascript
javascript游戏开发之《三国志曹操传》零部件开发(一)让静态人物动起来
Jan 23 Javascript
你必须知道的JavaScript 中字符串连接的性能的一些问题
May 07 Javascript
js获取IP和PcName(IE)在vs中可用
Aug 02 Javascript
解决Extjs4中form表单提交后无法进入success函数问题
Nov 26 Javascript
jQuery基于toggle实现click触发DIV的显示与隐藏问题分析
Jun 12 Javascript
Javascript中Promise的四种常用方法总结
Jul 14 Javascript
bootstrap精简教程_动力节点Java学院整理
Jul 14 Javascript
详解如何在vscode里面调试js和node.js的方法步骤
Dec 24 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
Gregarius中文日期格式问题解决办法
2008/04/22 PHP
PHP代码判断设备是手机还是平板电脑(两种方法)
2015/10/19 PHP
数据结构之利用PHP实现二分搜索树
2020/10/25 PHP
两种方法实现文本框输入内容提示消失
2013/03/17 Javascript
JS解决url传值出现中文乱码的另类办法
2013/04/08 Javascript
基于NodeJS的前后端分离的思考与实践(四)安全问题解决方案
2014/09/26 NodeJs
jQuery模拟360浏览器切屏效果幻灯片(附demo源码下载)
2016/01/29 Javascript
JavaScript判断是否是微信浏览器
2016/06/13 Javascript
jquery.multiselect多选下拉框实现代码
2016/11/11 Javascript
JS按条件 serialize() 对应标签的使用方法
2017/07/24 Javascript
AngularJS中filter的使用实例详解
2017/08/25 Javascript
jQuery选择器之子元素过滤选择器
2017/09/28 jQuery
浅析java线程中断的办法
2018/07/29 Javascript
layui将table转化表单显示的方法(即table.render转为表单展示)
2019/09/24 Javascript
vue全局使用axios的操作
2020/09/08 Javascript
Python enumerate遍历数组示例应用
2008/09/06 Python
python时间整形转标准格式的示例分享
2014/02/14 Python
通过Python使用saltstack生成服务器资产清单
2016/03/01 Python
Python正则表达式教程之一:基础篇
2017/03/02 Python
cmd运行python文件时对结果进行保存的方法
2018/05/16 Python
Python类装饰器实现方法详解
2018/12/21 Python
Python使用scrapy爬取阳光热线问政平台过程解析
2019/08/14 Python
python是否适合网页编程详解
2019/10/04 Python
使用Matplotlib 绘制精美的数学图形例子
2019/12/13 Python
Python使用plt.boxplot() 参数绘制箱线图
2020/06/04 Python
利用Pycharm + Django搭建一个简单Python Web项目的步骤
2020/10/22 Python
东芝官网商城:还原日式美学,打造美好生活
2018/12/27 全球购物
公司业务主管岗位职责
2013/12/07 职场文书
技术总监个人的自我评价范文
2013/12/18 职场文书
国贸专业大学生职业生涯规划范文
2014/01/10 职场文书
乡镇消防工作实施方案
2014/03/27 职场文书
单方离婚协议书范本(2014版)
2014/09/30 职场文书
2015年初中元旦晚会活动总结
2014/11/28 职场文书
《半截蜡烛》教学反思
2016/02/19 职场文书
Python insert() / append() 用法 Leetcode实战演示
2021/03/31 Python
《勇者辞职不干了》上卷BD发售宣传CM公开
2022/04/08 日漫