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

要求：

方案一

刚开始最简单的方法是使用前台请求数据，然后通过select和option在页面上显示，但是写了一段时间后发现有很多重复的代码如下：

//初始化grade options initgrade options(){ this . grade service . getall()。subscribe((RES)={ this . grade options=RES；}，()={ console.log('get gradeOption错误')；});}nz-select nzPlaceHolder='请选择您所属的等级'表单控件名称=' grade' NZ-option * ng for='让等级选项的等级'[NZ标签]=' grade。名称'[NZ值]='等级'/NZ-选项/NZ-选择写入每个列表所需数据的方法和方式

备选方案2

因为这种列表在项目中不止一个地方使用，所以我想把这些列表单独拿出来，写成组件。这里，参照组长朴史超的角度输入和输出，这个组件的思想写如下：

ts:

@Input()默认值：等级；//所选值@ output()selected=neweventimmeternumber()；//输出属性数据： Grade[]；//所有数据构造函数(private grade service : grade service){ }//请求所有数据ngoninit(){ this . grade service . getall()。subscribe((RES)={ this . data=RES；}，()={ console . log(' error ')；});}//当内容发生变化时，将选定对象的id弹出到父组件绑定的事件中。data change(){ this . selected . emit(this . default value)；}html:

NZ-select nzPlaceHolder=' grade ' class=' wide '[(ng model)]=' default value '(ng model change)=' data change()' NZ-option * ng for=' let data of data '[nzlabel]=' data . name '[nzvalue]=' data '/NZ-option/NZ-select PS :默认选择的功能仍在改进中，需要更新

思考

当我按照上面的套路继续写大学名单、专业名单、klass名单的时候，就会有teacherList、studentList等。未来，哪个不会形成大量的重复代码？

所以我想知道我是否可以设计一个组件：

我让它成为一个列表。

然后我寻找这些组件的共性，并找到它们所请求的数据的特征：

get请求返回的所有数据都是数组URL，只有最后一个不同。然后，我只需要向组件发送一个url数组，然后我就可以根据URL请求相应的数据并生成相应的模板

选项3(失败)

子组件ts:

@ Input()URL : String[][]=[]；//保存传递的URL datas : String[][]=[]；//保存查询结果@ input()title s 3360 string[][]=[]；//保存提示语句@ output()select items=new event emitter()；//所选对象索引=0；items=[]；构造函数(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:数字){ console . log(this . items)；this . selectitems . emit(this . items)；this . GetDATa(I 1)；}子组件html:

NZ-select[nzPlaceHolder]=' titles[I]' style=' width : 150 px；'(ng modelChange)=' DataChange(I)'[(ng model)]=' items[I]' * ngFOr=' Let URL of URL，Let I=index ' NZ-option * ng for=' Let item of data[I]'[NZ value]=' item '[NZ label]=' item。名称'/NZ-选项/NZ-选择父组件ts:

url=['年级'，'学院'，'专业']；Titels=['年级'，'学院'，'专业']；getSelectItems(事件){ console.log(事件)；}父组件html:

app-grade-list[URL]=' URL '[titles]=' titles '(选择项)=' getselectitems($ event)'/app-grade-list效果：

看似管用，但如果你以后再写，就会发现有致命的缺陷。

每个下拉框都是根据url生成的。使用时需要找到url发送给父组件的数据，不知道数据和实体的对应关系。当有级联时，这种方案很难使用，也很难维护。摘要

虽然这些下拉列表有一定的共性，可以抽象出一些常见的功能来实现，但是它们的设计有些复杂，使用效果也不好，所以最后放弃了第三种方案。

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。