如何将后端返回值(数字)与下拉框label值(文字)匹配?

镜亦亦
  • 21

后端返回0或者1的状态码,前端修改页面信息时,需要在下拉框nz-select中选中当前返回值代表的label。
下拉框的数据是写死的,ts中,定义一个list表示下拉框的数据

 List = [
    {
      label: '单次',
      value: '0',
      isLeaf: true,
    },
    {
      label: '周期',
      value: '1',
      isLeaf: true,
    },
  ];

用表单做的数值绑定

createForm() {
  planType: [后端值, [Validators.required]],
 });

html页面

<nz-form-item>
    <nz-form-label [nzRequired]="true" [nzFor]="'planType'">类型</nz-form-label>
    <nz-form-control nzHasFeedback>
      <nz-select nzShowSearch nzPlaceHolder="类型" id="planType" formControlName="planType">
        <nz-option *ngFor="let item of List" [nzLabel]="item.label" [nzValue]="item.value"></nz-option>
      </nz-select>
    </nz-form-control>
  </nz-form-item>

如何将后端返回值(数字)与下拉框label值(文字)匹配?

回复
阅读 639
2 个回答
✓ 已被采纳

把0,1转成'0','1'就行了。

xxx.pipe(map(a => a.toString())).subscribe()

参考这个例子,可以使用Vue过滤器, 将后端的字段映射到前端想要的值, 比如后端=ok, 前端=成功

Vue.filter('mapStr', (val)=>{  // val --- 后端值
    const $data = {
        'ok': '成功',
        'error': '失败'
    }
    return $data[val] 
})

//假设数据 data:["ok", 'error']

// 组件中使用
<div v-for="i in data">{{ i | mapStr }}</div> // 这时候就会把后端值替换成前端想要的值

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
你知道吗?

宣传栏