需求:页面加载进来 医院名称下拉选显示全部:
解决方法:后台查询下拉选内容的时候,回显设置数据,用js的unshift方法添加一个下拉选为"全部"的选项。然后把默认设置为"全部"(下标为0)
重点是:
data.rows.unshift("全部");
还有:
this.queryHospitalName = this.hospitalNameList[0];
看ts代码:
//医院名称列表下拉选
loadHospitalNames() {
this.hospitalService.getHospitalNames().subscribe(data => {
data.rows.unshift("全部");
this.hospitalNameList = data.rows;
this.queryHospitalName = this.hospitalNameList[0];
});
}
再看下前端html:
<nz-select
[nzSize]="'large'"
name="queryHospitalName"
nzId="queryHospitalName"
nzAllowClear
[nzPlaceHolder]="'请选择医院'"
[(ngModel)]="queryHospitalName"
nzShowSearch>
<nz-option
*ngFor="let hospitalName of hospitalNameList"
[nzLabel]="hospitalName"
[nzValue]="hospitalName"
>
</nz-option>
</nz-select>