angular - ngx-chips 自动完成返回值以及显示字符串

Question

我正在关注这个非常基本的示例https://stackblitz.com/edit/ngx-chips-example

组件.ts

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

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

组件.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]="selectedItemsList"，不要忘记selectedItemsList在父组件的类中声明该引用。

Answer 3

据我了解，如果您不想显示默认值，则只需删除[ngModel]="['@items']"：

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

我试过你的 stackblitz，它似乎工作： https ://stackblitz.com/edit/ngx-chips-example-wq27q1

Answer 4

对我来说，我发现控制台错误暗示了这个问题：

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

所以只需在标签输入中添加一个名称属性就可以解决问题..：

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

希望它可以帮助某人