一个小细节问题,使用AntDesign的组件,一个多选框想要默认显示多个搜索条件时,初始化的时候应该怎么做:
首先HTML上:
<nz-form-control>
<nz-select nzMode="multiple" nzPlaceHolder="请选择" [formControlName]="bStatus"
nzAllowClear="true">
<nz-option *ngFor="let option of bStatusList" [nzLabel]="option.label"
[nzValue]="option.value">
</nz-option>
</nz-select>
</nz-form-control>
[formControlName]="bStatus"表示这个字段是一个表单中的一个字段,相当于我们常用的[(ngModel)]="bStatus"这样的双向数据绑定。
其中选项的json数据都保存在bStatusList中,其中的数据格式类似于:
[ { label:'待生成',value:0 },
{ label:'已生成',value:1 },
{ label:'待审批',value:2 },
{ label:'审批通过',value:3 } ]
我们如果想在页面初始化的时候带入选项0和选项1,也就是显示待生成和已生成两个条件在页面上,该怎么做呢?
一开始我在初始化这个选项的时候,是这样做的(这个bStatus字段属于searchForm这个表单):
this.searchForm.controls['bStatus'].setValue('0,1');
这样试了一下,虽然传输的数据是对的,但是没有在页面上将两个条件显示在搜索框字段中,看了一下官方文档上的nzMode="multiple"的选项的部分,发现是组装成数组向后台传输的,我就改成了下面这样:
this.searchForm.controls['bStatus'].setValue(['0', '1']);
这样页面上就能正常显示啦: