【Angular】——无限级下拉列表框

前言

前段时间换了新框架，将前后端分离，对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>