前言
前段时间换了新框架,将前后端分离,对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>
原文地址:https://www.jb51.cc/angularjs/147152.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。