通过 html datalist 和 *ngFor 显示一个值并提交另一个值

Question

我正在使用具有 *ngFor 功能的 <datalist> 创建一个自动完成文本框，但是我使用的代码显示了我声明为 [value] 的内容以及我所声明的内容在 <option> 标签之间输入...

Here is the stackblitz

这是出现自动完成时我得到的视图：

来自代码行：

我本来希望自动完成框只显示 {{d.val}}，但在我提交表单时提交 {{d.name}}。

为什么它同时显示 {{d.val}} 和 {{d.name}}，有什么方法可以显示一个并提交另一个？

Answer 1

datalist tag will by definition render the value attribute of each option in the select list and then you additionally displayed {{d.val}} as a label (aame as setting the label attribute). Also, see this .

datalist 的行为与 select 不同。如果不编写额外的 javascript 代码，就不可能有不同的 display/submit 值。