一、案例描述
需求是下拉支持多选,支持全部,经最后审查,按用户的角度选择全部和其余项目是二选一的,所以便按这个进行开发啦~
二、解决方法
通过在项目中每条数据添加属性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代码可能比较啰嗦,后期有优化会持续更新的,如果有好的优化方案阅读者可以提的哦,毕竟我也是初学者,非常乐意听大佬的意见的哦~