angular 實(shí)現(xiàn)下拉列表組件的示例代碼

發(fā)布時(shí)間：2020-09-01 13:56:55 來源：腳本之家閱讀：220 作者：陳杰欄目：web開發(fā)

需求：

方案一

最開始就是用最簡(jiǎn)單的方法，前臺(tái)請(qǐng)求數(shù)據(jù)，然后通過select和option在頁面上顯示，但是寫了一會(huì)兒發(fā)現(xiàn)出現(xiàn)了許多類似下面的重復(fù)的代碼：

// 初始化年級(jí)選項(xiàng)
initGradeOptions() {
  this.gradeService.getAll().subscribe((res) => {
    this.gradeOptions = res;
  }, () => {
    console.log('get gradeOption error');
  });
}
<nz-select nzPlaceHolder="請(qǐng)選擇所屬年級(jí)" formControlName="grade">
  <nz-option *ngFor="let grade of gradeOptions" [nzLabel]="grade.name"
       [nzValue]="grade"></nz-option>
</nz-select>

每寫一個(gè)列表都要寫請(qǐng)求它的數(shù)據(jù)的方法和模板中的內(nèi)容，非常繁瑣。

方案二

因?yàn)樵陧?xiàng)目中，不止一個(gè)地方用到了這樣的列表，所以就想著把這些列表單獨(dú)拿出來，寫成組件。
這里就參考了樸世超組長(zhǎng)的angular的輸入與輸出寫了這個(gè)組件
思路大概如下：

angular 實(shí)現(xiàn)下拉列表組件的示例代碼

ts:

@Input() defaultValue: Grade;            // 選中的值
@Output() selected = new EventEmitter<number>();  // 輸出屬性
datas: Grade[];                   // 所有數(shù)據(jù)

constructor(private gradeService: GradeService) {
}

// 請(qǐng)求所有的數(shù)據(jù)
ngOnInit() {
  this.gradeService.getAll().subscribe((res) => {
    this.datas = res;
  }, () => {
    console.log('error');
  });
}

// 當(dāng)則內(nèi)容更改時(shí)，將已選中對(duì)象的id彈射到父組件綁定的事件上
dataChange() {
  this.selected.emit(this.defaultValue);
}

html:

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

ps: 默認(rèn)選中的功能還在完善，待更新

思考

當(dāng)我照著上面的套路繼續(xù)寫collegeList,majorList,klassList，以后還會(huì)有teacherList,studentList等等，這樣不也形成了很多重復(fù)的代碼嗎？

于是我就想能不能設(shè)計(jì)一個(gè)組件：

我讓它是什么列表，它就是什么列表。

然后我就尋找這幾個(gè)組件的共性，發(fā)現(xiàn)它們請(qǐng)求數(shù)據(jù)的的特點(diǎn)：

都是使用get請(qǐng)求
返回的數(shù)據(jù)都是數(shù)組
url只有最后一項(xiàng)不同

那么，我只要傳給組件一個(gè)url數(shù)組，就能根據(jù)url請(qǐng)求對(duì)應(yīng)的數(shù)據(jù)，再生成相應(yīng)的模板

方案三(失敗)

angular 實(shí)現(xiàn)下拉列表組件的示例代碼

子組件ts:

@Input() urls: String[][] = [];         // 保存?zhèn)鬟f過來的url
datas: String[][] = [];             // 保存查詢結(jié)果
@Input() titles: String[][] = [];        // 保存提示語句
@Output() selectItems = new EventEmitter();   // 已選中的對(duì)象
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]"
    
    (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 = ['年級(jí)', '學(xué)院', '專業(yè)'];

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

父組件html:

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

效果：

angular 實(shí)現(xiàn)下拉列表組件的示例代碼

看起來還能用，但是再往后寫就發(fā)現(xiàn)這樣寫有致命的缺陷。

每一個(gè)下拉框都是根據(jù)url生成的，使用時(shí)需要查找url
傳給父組件的數(shù)據(jù)不知道數(shù)據(jù)與實(shí)體的對(duì)應(yīng)關(guān)系
當(dāng)存在級(jí)聯(lián)時(shí)，使用該方案難度高，且不易維護(hù)。

總結(jié)

雖然這些下拉列表有一定的共性，并且可以抽象出一些公共的功能來實(shí)現(xiàn)，但本身設(shè)計(jì)略復(fù)雜，且使用效果并不好，最后還是放棄了第三個(gè)方案。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持億速云。

向AI問一下細(xì)節(jié)

angular 實(shí)現(xiàn)下拉列表組件的示例代碼

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽