angular2 select 联动

 

 

 界面操作触发大分类id改变，根据id获取二级分类的数据进行绑定显示。

html：

<div style="overflow: hidden;float: left;padding-left: 38px">
                    <div style="margin-bottom: 10px;display:inline-block;">
                        <span>&emsp;选择大分类：</span>
                        <div class="select">
                            <select name='make' [(ngModel)]="matCase.bigType" (change)="getSmallTypes();">
                                <option *ngFor="let i of bigTypes" value='{{i.id}}'>
                                    {{i.name}}
                                </option>
                            </select>
                        </div>
                    </div>
                    <div style="margin-bottom: 10px;display:inline-block;">
                        <span>&emsp;选择二级分类：</span>
                        <div class="select">
                            <select name='make' [(ngModel)]="matCase.smallType">
                                <option *ngFor="let i of smallTypes" value='{{i.id}}'>
                                    {{i.name}}
                                </option>
                            </select>
                        </div>
                    </div>
                </div>

 

 

ts：构建两个函数，大分类在

ngOnInit() {}函数初始化的时候获取对应的值；

 /*
    * 发布素材需要关联一个分类，
    * 大分类必选，二级分类非必选，需要做成联动效果
    * 选择一级分类后，动态得到二级分类下的数据，没有就显示空
    * */
    bigTypes: any = []
    smallTypes: any = []
    //分类列表
    getBigTypes(): void {
        let sendData = {
            created: '',
            sort: '',
            name: '',
        }
        let connect = this._api.getApi({
            apiUrl: api.getBigList,
            sendData: sendData,
            type: 'get',
        })
        connect.then(res => {
            if (res && res.data) {
                this.bigTypes = res.data
            } else {
                this.bigTypes = []
            }
        })
    }

    //获得小分类
    getSmallTypes(): void {
        console.log('e.target.value',this.matCase.bigType);
        let n = this.matCase.bigType;
        let s = {
            id: n, //大分类id
        }
        let connect = this._api.getApi({
            apiUrl: api.getCategoryByPid,
            sendData: s,
            type: 'get',
        })
        connect.then(res => {
            if (res && res.data) {
                // log(res.data, '查看小分类列表')
                this.smallTypes = res.data
            } else {
                this.smallTypes = []
            }
        })
    }