Автозаполнение ngx-chips возвращает значение вместе со строкой отображения

Question

Я следую этому очень простому примеру https://stackblitz.com/edit/ngx-chips-example

component.ts

export interface AutoCompleteModel {
  value: any;
  display: string;
}

 public items = [
    {display: 'Pizza', value: 1},
    {display: 'Pasta', value: 2},
    {display: 'Parmesan', value: 3},
  ];

component.html

<tag-input [ngModel]="['@items']" >
     <tag-input-dropdown  [autocompleteItems]="items" [showDropdownIfEmpty]="true" [dynamicUpdate]="false"></tag-input-dropdown>
 </tag-input>

Но мой результат выглядит следующим образом

Значение отображается вместе с дисплеем. Как убрать значение?

Answer 1

согласно моему пониманию, вы должны использовать [(ngModel)]="selectedItem" для этого.

<code><div class="force-to-the-bottom">
  <tag-input [(ngModel)]="selectedItem">
    <tag-input-dropdown
      [autocompleteItems]="items"
      [showDropdownIfEmpty]="true"
      [dynamicUpdate]="false"
    >
    </tag-input-dropdown>
  </tag-input>
</div>

<pre>{{selectedItem | json}}

Answer 2

Насколько я понимаю, если вы не хотите отображать значение по умолчанию, вам нужно только удалить [ngModel]="['@items']":

<tag-input>
   <tag-input-dropdown
    [autocompleteItems]="items"
    [showDropdownIfEmpty]="true"
    [dynamicUpdate]="false">
   </tag-input-dropdown>
</tag-input>

Я попытался с вашим стеком, и это похоже на работу: https://stackblitz.com/edit/ngx-chips-example-wq27q1