Angular:多选搜索框默认显示多个搜索条件

一个小细节问题,使用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']);

这样页面上就能正常显示啦:

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值