Angular中的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>

component.ts中的codeList数组

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

DataList在选项中显示名称（c.name）和值（c.code）并存储值中存在的内容，而select显示名称（c.name）和存储值（c.code）。 / p>

datalist的行为

选择行为

示例2：     

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

{{a}}

我想在建议框中显示i-1的值，但是绑定变量＆＃39; a＆＃39;与我。

HTML中的现有解决方案

从这篇文章Show datalist labels but submit the actual value我看到我们可以使用＆＃34;数据值＆＃34;至 实现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);
}

Answer 2

以这种方式试试。

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

Answer 3

好吧，如果我没有说出真相但你不能将[值]绑定到＆＃39; a，那么有人可能会纠正我，因为那时每个option-element都具有相同的值＆＃39;一个＆＃39 ;.

要实现您想要的目标，您必须构建一个包含两个字段的对象数组，＆＃39; a＆＃39;和＆＃39;我＆＃39;。然后你就可以显示出来了。并通过ngModel将您的值绑定到＆＃39; a＆＃39;。

e.g。

您组件中的

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>