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 = []
            }
        })
    }