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

【问题标题】：ngx-chips autocomplete returns value along with display stringngx-chips 自动完成返回值以及显示字符串
【发布时间】：2019-05-22 06:20:48
【问题描述】：

我正在关注这个非常基本的例子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>

但是，我的结果是这样的

值与显示一起显示。怎么去掉值？

【问题讨论】：

标签： angular ngx-chips

【解决方案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>

【讨论】：

[(ngModel)]="selectedItem" 不起作用。但是，如果我删除我的 html 中的所有 div 并只放置这段代码，那么原始示例似乎可以工作。

【解决方案2】：

据我了解，如果您不想显示默认值，只需删除[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

【讨论】：

我在没有 ngModel 的情况下尝试过。可悲的是，它仍然显示了价值。
你能用你的例子更新你的 stackblitz 吗？也许还有别的东西
一个区别是我使用 Angular 7。另一个区别是在示例中， import { TagInputComponent } from './shared/tag-input/tag-input.component';我没有导入它，因为我收到一个错误，因为 TagComponent 已经是 TagModule 的一部分。
你应该导入你自己的 taginput 组件（如果你有的话）而不是显式地导入 TagModules 的组件。请检查导入。把这个放在一边，按照要求，做一个堆栈闪电战，展示你尝试过的东西，这样我们就可以修复它。
KiraAG。了解，我已经在我的 appmodule 中导入了。顺便说一句，我发现从我的 component.html 中删除
标记解决了这个问题。奇怪。

【解决方案3】：

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

【讨论】：

【解决方案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>

希望对某人有所帮助

【讨论】：