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"。

<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}}</pre>

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

Answer 3

在使用引用作为子组件输入属性[ngModel]="selectedItemsList"的值时，请不要忘记在父组件的类中声明该引用selectedItemsList。

Answer 4

对我来说，我发现该问题由控制台错误提示：

错误：如果在表单标签中使用了ngModel，则必须设置name属性或 表单控件必须在ngModelOptions中定义为“独立”。

因此只需在标签输入中添加name属性即可解决此问题。：

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

希望对别人有帮助