角DataList

Question

我有<datalist>和<select>，如下所示：

更新：

示例1:

<input type="text"  list="codes" [(ngModel)]="codeValue" (change)="saveCode(codeValue)">
<datalist id="codes">
  <option *ngFor="let c of codeList" [value]="c.code" >{{c.name}}</option>
</datalist>

<select type="text"  list="codes" [(ngModel)]="codeValue1" (change)="saveCode(codeValue)">
  <option *ngFor="let c of codeList" [value]="c.code" >{{c.name}}</option>
</select>

codeList阵列在component.ts中的应用

    codeList = [
    { code: 'abcdhe568dhjkldn', name: 'item1' },
    { code: 'ksdkcs7238t8cds', name: 'item2' },
    { code: 'kascggibebbi', name: 'item3' }
  ];

DataList在选项中同时显示名称(c.name)和值(c.code)，并存储任何当前值，而select则显示名称(c.name)和存储值(c.code)。

数据表的行为

​

​

选择的行为

​

​

示例2:

<datalist id="codes">
<option *ngFor = "let i of [1,2,3,4]" [value]="i">{{i-1}}</option>
</datalist>

{{a}}

我想在建议框中显示i-1的值，但是将变量'a‘与i绑定。

现有的解决方案

我从这篇文章中看到，我们可以使用“数据值”来实现Show datalist labels but submit the actual value的功能。如何在角中实现相同的功能。

请帮帮我！

提前谢谢。

Answer 1

就像这样..。

html文件

<input type="text"  list="codes" [(ngModel)]="codeValue" (change)="saveCode($event)">
<datalist id="codes">
<option *ngFor="let c of codeList" [value]="c.name" >{{c.name}}</option>
</datalist>

ts文件

 codeList = [
{ code: 'abcdhe568dhjkldn', name: 'item1' },
{ code: 'ksdkcs7238t8cds', name: 'item2' },
{ code: 'kascggibebbi', name: 'item3' }
];

 public saveCode(e): void {
let name = e.target.value;
let list = this.codeList.filter(x => x.name === name)[0];
console.log(list.id);
}

Answer 2

这边试试。

<option *ngFor = "let i of [1,2,3,4]" (change)="a=i" [value]="i">{{i-1}}</option>

Answer 3

如果我没有说真话，但你不能将值绑定到'a'，那么请有人纠正我，因为这样每个选项元素都有相同的值'a‘。

要实现您想要的结果，您必须构建一个包含'a‘和'i’这两个字段的对象数组。然后，您可以显示'i‘，并通过ngModel将您的值绑定到'a’。

例如：

在您的组件中

export class AI {
    constructor(
      a: number,
      i: number
    ) {}
}


aiList: Array<AI> = [];

ai: AI = new AI(1,0);
aiList.push(ai);
ai = new AI(2,1);
aiList.push(ai);
ai = new AI(3,2);
aiList.push(ai);
ai: = new AI(4,3);
aiList.push(ai);

在你的模板中

<option *ngFor = "let ai of aiList" (change)="a=ai.a" [(ngModel)]="ai.a">{{ai.i}}</option>