如何将后端返回值（数字）与下拉框label值（文字）匹配？

Question

后端返回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值（文字）匹配？

Answer 1

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

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

Answer 2

参考这个例子,可以使用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> // 这时候就会把后端值替换成前端想要的值