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

方案一
最開(kāi)始就是用最簡(jiǎn)單的方法,前臺(tái)請(qǐng)求數(shù)據(jù),然后通過(guò)select和option在頁(yè)面上顯示,但是寫(xiě)了一會(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>
每寫(xiě)一個(gè)列表都要寫(xiě)請(qǐng)求它的數(shù)據(jù)的方法和模板中的內(nèi)容,非常繁瑣。
方案二
因?yàn)樵陧?xiàng)目中,不止一個(gè)地方用到了這樣的列表,所以就想著把這些列表單獨(dú)拿出來(lái),寫(xiě)成組件。
這里就參考了樸世超組長(zhǎng)的angular的輸入與輸出寫(xiě)了這個(gè)組件
思路大概如下:

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ù)寫(xiě)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)的模板
方案三(失敗)


子組件ts:
@Input() urls: String[][] = []; // 保存?zhèn)鬟f過(guò)來(lái)的url
datas: String[][] = []; // 保存查詢結(jié)果
@Input() titles: String[][] = []; // 保存提示語(yǔ)句
@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]"
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 = ['年級(jí)', '學(xué)院', '專業(yè)'];
getSelectItems(event) {
console.log(event);
}
父組件html:
<app-grade-list
[urls]="url"
[titles]="titels"
(selectItems)="getSelectItems($event)">
</app-grade-list>
效果:

看起來(lái)還能用,但是再往后寫(xiě)就發(fā)現(xiàn)這樣寫(xiě)有致命的缺陷。
- 每一個(gè)下拉框都是根據(jù)url生成的,使用時(shí)
需要查找url - 傳給父組件的數(shù)據(jù)
不知道數(shù)據(jù)與實(shí)體的對(duì)應(yīng)關(guān)系 - 當(dāng)存在級(jí)聯(lián)時(shí),使用該方案難度高,且
不易維護(hù)。
總結(jié)
雖然這些下拉列表有一定的共性,并且可以抽象出一些公共的功能來(lái)實(shí)現(xiàn),但本身設(shè)計(jì)略復(fù)雜,且使用效果并不好,最后還是放棄了第三個(gè)方案。
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- angular 動(dòng)態(tài)組件類型詳解(四種組件類型)
- Angular7創(chuàng)建項(xiàng)目、組件、服務(wù)以及服務(wù)的使用
- angular4自定義組件非input元素實(shí)現(xiàn)ngModel雙向數(shù)據(jù)綁定的方法
- angular6的table組件開(kāi)發(fā)的實(shí)現(xiàn)示例
- 詳解Angular中實(shí)現(xiàn)自定義組件的雙向綁定的兩種方法
- 淺談angular2子組件的事件傳遞(任意組件事件傳遞)
- 詳解Angular6學(xué)習(xí)筆記之主從組件
- 詳解Angular動(dòng)態(tài)組件
相關(guān)文章
angular內(nèi)置provider之$compileProvider詳解
下面小編就為大家?guī)?lái)一篇angular內(nèi)置provider之$compileProvider詳解。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-09-09
Angular2.0/4.0 使用Echarts圖表的示例代碼
本篇文章主要介紹了Angular2.0/4.0 使用Echarts的示例代碼,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-12-12
詳解AngularJS實(shí)現(xiàn)表單驗(yàn)證
這篇文章主要介紹了AngularJS實(shí)現(xiàn)表單驗(yàn)證,客戶端表單驗(yàn)證是AngularJS里面最酷的功能之一。AngularJS表單驗(yàn)證可以讓你從一開(kāi)始就寫(xiě)出一個(gè)具有交互性和可相應(yīng)的現(xiàn)代HTML5表單,對(duì)AngularJS表單驗(yàn)證感興趣的小伙伴們可以參考一下2015-12-12
angular json對(duì)象push到數(shù)組中的方法
下面小編就為大家分享一篇angular json對(duì)象push到數(shù)組中的方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-02-02
angular2實(shí)現(xiàn)統(tǒng)一的http請(qǐng)求頭方法
今天小編就為大家分享一篇angular2實(shí)現(xiàn)統(tǒng)一的http請(qǐng)求頭方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-08-08
Angular中的ng-template及angular 使用ngTemplateOutlet 指令的方法
ng-template 是用來(lái)定義模板的,當(dāng)使用ng-template定義好一個(gè)模板之后,可以用ng-container和templateOutlet指令來(lái)進(jìn)行使用。這篇文章給大家介紹了Angular中的ng-templateangular及使用 ngTemplateOutlet 指令的方法,需要的朋友參考下吧2018-08-08

