需求:
成都創(chuàng)新互聯(lián)公司2013年至今,是專業(yè)互聯(lián)網(wǎng)技術(shù)服務(wù)公司,擁有項(xiàng)目網(wǎng)站制作、網(wǎng)站設(shè)計(jì)網(wǎng)站策劃,項(xiàng)目實(shí)施與項(xiàng)目整合能力。我們以讓每一個(gè)夢想脫穎而出為使命,1280元古雷港做網(wǎng)站,已為上家服務(wù),為古雷港各地企業(yè)和個(gè)人服務(wù),聯(lián)系電話:18980820575
方案一
最開始就是用最簡單的方法,前臺(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ú)拿出來,寫成組件。
這里就參考了樸世超組長的angular的輸入與輸出寫了這個(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ù)寫collegeList
,majorList
,klassList
,以后還會(huì)有teacherList
,studentList
等等,這樣不也形成了很多重復(fù)的代碼嗎?
于是我就想能不能設(shè)計(jì)一個(gè)組件:
我讓它是什么列表,它就是什么列表。
然后我就尋找這幾個(gè)組件的共性,發(fā)現(xiàn)它們請(qǐng)求數(shù)據(jù)的的特點(diǎn):
那么,我只要傳給組件一個(gè)url數(shù)組,就能根據(jù)url請(qǐng)求對(duì)應(yīng)的數(shù)據(jù),再生成相應(yīng)的模板
方案三(失敗)
子組件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>
效果:
看起來還能用,但是再往后寫就發(fā)現(xiàn)這樣寫有致命的缺陷。
需要查找url
不知道數(shù)據(jù)與實(shí)體的對(duì)應(yīng)關(guān)系
不易維護(hù)
。總結(jié)
雖然這些下拉列表有一定的共性,并且可以抽象出一些公共的功能來實(shí)現(xiàn),但本身設(shè)計(jì)略復(fù)雜,且使用效果并不好,最后還是放棄了第三個(gè)方案。
以上就是本文的全部內(nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持創(chuàng)新互聯(lián)。
網(wǎng)站名稱:angular實(shí)現(xiàn)下拉列表組件的示例代碼
標(biāo)題鏈接:http://jinyejixie.com/article16/jojidg.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供關(guān)鍵詞優(yōu)化、網(wǎng)站營銷、網(wǎng)站制作、云服務(wù)器、定制網(wǎng)站、網(wǎng)站維護(hù)
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場,如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來源: 創(chuàng)新互聯(lián)
猜你還喜歡下面的內(nèi)容