前言
前段时间换了新框架,将前后端分离,对Angular2有点感兴趣,所以参与一起封装组件。在小5的帮助下,学会了
好多东西,这里总结下封装的无限级下拉列表框。
dropdownlist.ts
import { Component,OnInit,Output,EventEmitter,Input } from '@angular/core'; import { URLSearchParams } from '@angular/http'; import {DataService} from "./dataservice"; @Component({ selector:'dropdownlist',templateUrl:'./dropdownlist.component.html',styleUrls:['./dropdownlist.component.css'],}) export class DropDownListComponent{ @Input() urls:String[][] = new Array();//保存传递过来的url datas:String[][] = new Array(); //保存查询结果 @Input() titles:String[][] = new Array();//保存提示语句 condition:string = "";//查询条件 index:number = 0; constructor(public dataService : DataService ){} ngOnInit(){ this.getData(this.condition,this.index); } getData(condition : string,index : number ):void{ var condition = (condition == "" ? "" : condition); if(index < this.urls.length){ let url = this.urls[index].toString() + condition; this.dataService.getData(url).then( res=> { this.datas[index] = res; }); } } dataChange(condition:string,i:number){ this.getData(condition,i+1); } }
dropdownlist.component.html
<div> <select name="data" class="comboBox form-control" *ngFor="let url of urls,let i = index" (change)="dataChange($event.target.value,i)"> <option value="-1">--{{titles[i]}}--</option> <option *ngFor="let item of datas[i]" value="{{item.id}}" >{{item.name}}</option> </select> </div>