Question

示例：

const obj = {name:"abc", value:"20"};

必须将该值设置为20，但要显示给用户abc。

Answer 1

您可以使用select菜单：

<select>
    <option value="20">abc</option>
    <option value="100">xyz</option>
</select>

然后用户可以选择 abc ，但您获得的值为 20 。

Answer 2

您不必将用户看到的相同数据发布到服务器。使用Angular，您可以保留独立于视图的数据结构，并将其发送到服务器。

例如，您可以定义一个Product接口，如下所示：

export interface Product {
  id: number;
  productName: string;
  productCode: string;
  category: string;
  categoryId: number;
}

用户界面可以允许显示/输入类别，但是数据结构可以将值保留为categoryId。然后，您可以仅将categoryId传递回服务器。

Answer 3

一件事是您看到的，另一件事是您发送的。有点像（这是一个愚蠢的例子）

<form (ngSubmit)="onSubmit()">
  <input [(ngModel)]="user">
</form>

const obj = [{name:"abc", value:"20"},{name:"def", value:"30"}];
user:any;
ngOnInit()
{
     this.user=dataToForm(20);
}
onSubmit()
{
   let data=this.formToData(this.user);
   console.log(data);
}

//we received real data and transform to display data
dataToForm(data:any)
{
   let item=obj.find(x=>x.value==data);
   return item?item.name:null
}

//we received display data and transform to real data
formToData(dataForm:any)
{
   let item=obj.find(x=>x.name==dataForm);
   return item?item.value:null

}

设置文本输入字段显示值与实际值不同

3 个答案: