Angular2 ng2-自动完成实施问题

Question

我已按照此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)"/>

这就是我得到的：

Answer 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不会显示任何内容，这是您要完成的任务。

Answer 2

你可以尝试ang2-autocomplete 实时样本位于：plnkr.co/edit/5zRD0fcOZHXEMOk4kupY?p=preview