欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-05-26 10:48:50
需求: 方案一 最开始就是用最简单的方法,前台请求数据,然后通过select和option在页面上显示,但是写了一会儿发现出现了许多类似下面的重复的代码:...

需求:

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 实现下拉列表组件的示例代码

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
  • 传给父组件的数据不知道数据与实体的对应关系
  • 当存在级联时,使用该方案难度高,且不易维护

总结

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

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