我有一个 <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 中实现相同的功能。
请帮忙!
提前致谢。
最佳答案
像这样尝试....
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);
}
关于html - Angular 中的数据列表,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49456071/