Angular2 ng2-auto-complete 实现问题答案

【问题标题】：Angular2 ng2-auto-complete implementation issuesAngular2 ng2-auto-complete 实现问题
【发布时间】：2017-01-06 20:16:22
【问题描述】：

我已经按照这个example 实现了Angular 2 ng2-auto-complete 组件。您也可以通过here 访问它。

我面临的问题是，我的来源是以id 作为字段之一的对象的形式。并按照组件的实现示例，id 显示在下拉列表中的括号中。有没有办法不在下拉列表中显示id？

这是我的自动完成组件的 HTML 代码：

<input ng2-auto-complete id="inputEvent" class="form-control" [(ngModel)]="model" ngModel
     name="event" #event="ngModel" [source]="items" display-property-name="name" (valueChanged)="onSelect($event)"/>

这是我得到的：

【问题讨论】：

标签： javascript html angular

【解决方案1】：

你需要将value-property-name属性设置为null：

<input ng2-auto-complete id="inputEvent" class="form-control"
[(ngModel)]="model" ngModel name="event" #event="ngModel"
[source]="items" value-property-name=null
display-property-name="name" (valueChanged)="onSelect($event)"/>

value-property-name 是可选属性，但它有默认值 - id。将其设置为 null 将不会显示任何内容，这是您想要完成的。

【讨论】：

【解决方案2】：

你可以试试ang2-autocomplete 现场样品可在以下网址获得：plnkr.co/edit/5zRD0fcOZHXEMOk4kupY?p=preview

【讨论】：