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

 

 

查看更多关于angular2 select 联动的详细内容...