欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

angular 實現下拉列表組件的示例代碼

 更新時間:2019年03月09日 15:38:04   作者:陳杰  
這篇文章主要介紹了angular 實現下拉列表組件的示例代碼,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧

需求:

方案一

最開始就是用最簡單的方法,前臺請求數據,然后通過select和option在頁面上顯示,但是寫了一會兒發(fā)現出現了許多類似下面的重復的代碼

// 初始化年級選項
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: 默認選中的功能還在完善,待更新

思考

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

于是我就想能不能設計一個組件:

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

然后我就尋找這幾個組件的共性,發(fā)現它們請求數據的的特點:

  • 都是使用get請求
  • 返回的數據都是數組
  • url只有最后一項不同

那么,我只要傳給組件一個url數組,就能根據url請求對應的數據,再生成相應的模板

方案三(失敗)

子組件ts:

@Input() urls: String[][] = [];         // 保存?zhèn)鬟f過來的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 = ['年級', '學院', '專業(yè)'];

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

父組件html:

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

效果:


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

  • 每一個下拉框都是根據url生成的,使用時需要查找url
  • 傳給父組件的數據不知道數據與實體的對應關系
  • 當存在級聯時,使用該方案難度高,且不易維護

總結

雖然這些下拉列表有一定的共性,并且可以抽象出一些公共的功能來實現,但本身設計略復雜,且使用效果并不好,最后還是放棄了第三個方案。

以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。

相關文章

  • AngularJS中下拉框的基本用法示例

    AngularJS中下拉框的基本用法示例

    這篇文章主要介紹了AngularJS中下拉框的基本用法,結合具體實例形式分析了AngularJS下拉框的元素綁定、選中及顯示等功能實現方法,需要的朋友可以參考下
    2017-10-10
  • angular內置provider之$compileProvider詳解

    angular內置provider之$compileProvider詳解

    下面小編就為大家?guī)硪黄猘ngular內置provider之$compileProvider詳解。小編覺得挺不錯的,現在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2017-09-09
  • Angular2.0/4.0 使用Echarts圖表的示例代碼

    Angular2.0/4.0 使用Echarts圖表的示例代碼

    本篇文章主要介紹了Angular2.0/4.0 使用Echarts的示例代碼,小編覺得挺不錯的,現在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2017-12-12
  • 詳解AngularJS實現表單驗證

    詳解AngularJS實現表單驗證

    這篇文章主要介紹了AngularJS實現表單驗證,客戶端表單驗證是AngularJS里面最酷的功能之一。AngularJS表單驗證可以讓你從一開始就寫出一個具有交互性和可相應的現代HTML5表單,對AngularJS表單驗證感興趣的小伙伴們可以參考一下
    2015-12-12
  • 深入理解Angular4訂閱(Subscribe)與取消

    深入理解Angular4訂閱(Subscribe)與取消

    這篇文章主要介紹了深入理解Angular4訂閱(Subscribe)與取消,詳細的介紹了訂閱與取消的使用,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2017-11-11
  • AngularJS ng-app 指令實例詳解

    AngularJS ng-app 指令實例詳解

    本文主要介紹AngularJS ng-app 指令,這里整理了ng-app指令的一些資料,并附實例代碼,有需要的小伙伴可以參考下
    2016-07-07
  • 詳解Angular 4 表單快速入門

    詳解Angular 4 表單快速入門

    本篇文章主要介紹了詳解Angular 4 表單快速入門,小編覺得挺不錯的,現在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2017-06-06
  • angular json對象push到數組中的方法

    angular json對象push到數組中的方法

    下面小編就為大家分享一篇angular json對象push到數組中的方法,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2018-02-02
  • angular2實現統(tǒng)一的http請求頭方法

    angular2實現統(tǒng)一的http請求頭方法

    今天小編就為大家分享一篇angular2實現統(tǒng)一的http請求頭方法,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2018-08-08
  • Angular中的ng-template及angular 使用ngTemplateOutlet 指令的方法

    Angular中的ng-template及angular 使用ngTemplateOutlet 指令的方法

    ng-template 是用來定義模板的,當使用ng-template定義好一個模板之后,可以用ng-container和templateOutlet指令來進行使用。這篇文章給大家介紹了Angular中的ng-templateangular及使用 ngTemplateOutlet 指令的方法,需要的朋友參考下吧
    2018-08-08

最新評論