html - Angular 中的数据列表

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>

component.ts 中的 codeList 数组

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

DataList 在选项中显示名称 (c.name) 和值 (c.code) 并存储值中存在的任何内容，而选择显示名称 (c.name) 并存储值 (c.code)。

datalist的行为

选择行为

示例 2:

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

{{a}}

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

HTML 中的现有解决方案

来自这篇文章Show datalist labels but submit the actual value我看到我们可以使用“数据值”来实现 HTML 中的功能。我怎样才能在 Angular 中实现相同的功能。

请帮忙!

提前致谢。

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);
}