Question

在我的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>

组件...

appSelect: any;
      picked(value: any) {
        console.log (value); 
      }

上面打印了我想要的内容，但是下拉列表显示了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); 
      }

上方在下拉列表中显示正确的值

   Dropdown: [i.name]

但是问题在于传递给pick的值是[i.name]而不是[i.info] 那么如何在仅在下拉菜单中显示名称的同时传递信息？

Answer 1

可能不是最佳解决方案，但它可以工作。您可以使用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);
  }

请参阅stackblitz demo

Angular 5无法从选择中获取下拉值

1 个答案: