Angular 5无法从select中获取下拉列表值

在我的html中，我有一段代码

Html

<input type="text" list="select" [(ngModel)]="appSelect" (change)="picked($event.target.value)" />
<datalist id="select">
<option selected="" value="">Select...</option>
<option *ngFor="let i of app; let x = index" [value]="i.info" >{{i.name}}</option>
</datalist>

上面打印了我想要的内容，但下拉列表显示了2个值。在下拉列表中，i.info位于左侧，i.name位于右侧

  Dropdown:  [i.info         i.name]

我只想在下拉栏中显示I.name

  Dropdown:  [i.name]

现在…我尝试了一种不同的方法

Html

<input type="text" list="select" [(ngModel)]="selectedVal" (ngModelChange)="picked($event)" />
<datalist id="select">
<option selected="" value="">Select...</option>
<option *ngFor="let i of app; let x = index" [ngValue]="i" >{{i.name}}</option>
</datalist>

@Input() selectedVal: string;
      picked(value: any) {
        console.log (value); 
      }

但问题是传递给picked的值是

[i.name]

，而不是

[i.info]

---

那么，如何在仅在下拉显示中显示名称的同时获取传入的信息呢？

可能不是最佳解决方案，但它很有效。您可以使用javascript find方法搜索数组并返回正确的对象，如下所示：

  app = [
    { name: 'Dominos', info: 'pizza'},
    { name: 'Taco Bell', info: 'tacos'},
    { name: 'McDonalds', info: 'hamburgers'}
  ]
  selectedValName: string;
  selectedValInfo: string;
  picked(value: any) {
    this.selectedValInfo = this.app.find(obj => obj.name == value).info
    console.log(this.selectedValInfo);
  }

---

请参见

这起到了作用。谢谢你。我想知道为什么在选择中它会显示两次？为什么[值]显示为下拉显示的一部分？@logger-您可以在中找到答案。

   Dropdown: [i.name]

  app = [
    { name: 'Dominos', info: 'pizza'},
    { name: 'Taco Bell', info: 'tacos'},
    { name: 'McDonalds', info: 'hamburgers'}
  ]
  selectedValName: string;
  selectedValInfo: string;
  picked(value: any) {
    this.selectedValInfo = this.app.find(obj => obj.name == value).info
    console.log(this.selectedValInfo);
  }