使用ng-zorro中 下拉 多选nz-select组件 添加搜索全部功能

一、案例描述

需求是下拉支持多选，支持全部，经最后审查，按用户的角度选择全部和其余项目是二选一的，所以便按这个进行开发啦~

二、解决方法

通过在项目中每条数据添加属性disable的来控制，此处注意的是在每条数据上加，并不是全部

三、事例代码

html

 <standard-form-row class='standardFormRow' grid last title="项目列表">
  <nz-select style="width: 200px;" ngModelChange nzMode="multiple" id="projectId"
      [(ngModel)]="CommonAllSearchInfo.projectIds"
      (ngModelChange)="onProjectChange($event)"
      [nzPlaceHolder]="'请选择项目'">
      <nz-option *ngFor="let project of projectList" [nzValue]="project.projectId" [nzLabel]="project.name"  [nzDisabled]="project.disabledPro"></nz-option>
    </nz-select>
  </standard-form-row>

js

 // 获取项目列表
  getProjectList() {
    this.http.getProjectsList(this.tenantId, this.managerId).subscribe(res => {

      // let allProjectIdArr = []
      if(res.length > 0){
        res.forEach((item) =>{
          item.disabledPro = false
          // allProjectIdArr.push(item.projectId)
        })
      }
      // console.log("allProjectIdArr",allProjectIdArr)
      let arr = [{ projectId: '-1',name: "全部",disabledPro:false}]

      this.projectList = arr.concat(res)
      console.log(" this.projectList==",  this.projectList)
    });
  }
//点击切换
 onProjectChange(value) {
    if (value.length > 0) {
      value.forEach((item) => {
        if (item == "-1") { //全部
          console.log("全部----,",item)
          this.projectList.forEach((pro)=>{
            if(pro.projectId == '-1'){
              pro.disabledPro = false
            }else{
              pro.disabledPro = true
            }
          })
        }else{  //其他
          console.log("其他----,",item)
          this.projectList.forEach((pro)=>{
            if(pro.projectId == '-1'){
              pro.disabledPro = true
            }else{
              pro.disabledPro = false
            }
          })
        }
      })
    }else{
      this.projectList.forEach((pro)=>{
          pro.disabledPro = false
      })
    }
  }

四、说明

• html中添加点击下拉可切换的事件(ngModelChange) 用于获取所选的元素来进行判断开启禁用
• 由于开发者是初学angular项目，所以完整的js没有搞清是什么意思，比如注入之类。所以这些都是基于搭好环境搭好页面，只是去获取数据的基础上的呦~
• js代码可能比较啰嗦，后期有优化会持续更新的_{，如果有好的优化方案阅读者可以提的哦}，毕竟我也是初学者，非常乐意听大佬的意见的哦~