Angular2 ng2-自动完成实施问题

时间:2016-10-21 18:48:13

标签: javascript html angular

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

这就是我得到的:

enter image description here

2 个答案:

答案 0 :(得分:4)

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

答案 1 :(得分:0)

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