2017-06-20 72 views
0

我尝试使用角度和使用的标签输入做一个自动完成。自动完成工作正常,但在发送表单之前,我想定义我的显示值和显示值的ID。Angular 2/4自动完成定义值

我的JSON文件:

[ 
      { 
       "active": true, 
       "code": "IDV", 
       "name": "Car destruct" 
      }, 
      { 
       "active": true, 
       "code": "VCV", 
       "name": "Vehicle road" 
      } 
] 

HTML:

<tag-input [(ngModel)]="folderCreate.sujet" name="sujet" 
         [theme]="'bootstrap'" [placeholder]="'Ajouter un type'" 
         [onTextChangeDebounce]="500" 
         [secondaryPlaceholder]="'Add un type'" 
         [onlyFromAutocomplete]="true"> 
          <tag-input-dropdown [autocompleteObservable]="**requestAutocompleteItemsSujet**"> 
           <ng-template let-item="item" let-index="index"> 
            {{item.display}} 
           </ng-template> 
          </tag-input-dropdown> 
        </tag-input> 

我的TS文件:

public requestAutocompleteItemsSujet = (text: string): Observable<Response> => { 
    return this.http 
     .get('../../../assets/data/type.json') 
     .map(data => data.json().map(item => item.name)); 
    } 

所以,当我把我的形式,我得到:

0: Object 
    display : Car destruct 
    value : Car destruct 

但我想:

0: Object 
    display : Car destruct 
    value : IDV 

我怎样才能解决这个问题?

+0

请提供一个plnkr例子... – Nehal

+0

好的,但我不明白plnkr是如何工作的... – user1814879

+0

下面的这个链接会给你一个Plunker中的Angular2模板。你可以添加代码来重新创建你的问题,然后保存plnkr并在你的问题中分享它的链接。 https://plnkr.co/edit/tpl:AvJOMERrnz94ekVua0u5 – Nehal

回答

0

我还没有运行你的plunkr,但看着你的代码,尝试删除data.json()后的第二个.map。

+0

好吧,但是当我删除第二张地图时,我无法显示自动填充的项目 – user1814879