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

// 初始化年級選項
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>

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

constructor(private gradeService: GradeService) {
}

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

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

<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>

@Input() urls: String[][] = [];         // 保存?zhèn)鬟f過來的url
datas: String[][] = [];             // 保存查詢結(jié)果
@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);
}

<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>

url = ['Grade', 'College', 'Major'];
titels = ['年級', '學(xué)院', '專業(yè)'];

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

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