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)。

数据列表的行为

选择的行为

示例 2：

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

{{a}}

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

HTML 中的现有解决方案

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

请帮忙！

提前致谢。

原文由 Sai Raman Kilambi 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

像这样尝试….

文件

<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>

文件

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

原文由 Nithin mm 发布，翻译遵循 CC BY-SA 4.0 许可协议