javascript - Angular - OnSelected 函数不适用于标签输入

Question

我使用的是ngx-chips，但无法实现OnSelected函数。

在我的 app.component.html 中我有这个:

<div class="force-to-the-bottom">
  <tag-input [ngModel]="[]" 
  (onSelect)="onSelected($event)"
  (onRemove)="onItemRemoved($event)">
    <tag-input-dropdown
      [autocompleteItems]="items"
      [showDropdownIfEmpty]="true"
      [dynamicUpdate]="false"            
    >
    </tag-input-dropdown>
  </tag-input>
</div>

在我的 app.component.ts 中，功能是通过这种简单的方式实现的:

  onSelected($event: any) {
    console.log("Fire Selected");
  }

  onItemRemoved($event: any) {
    console.log("Fire Removed");
  }

非常奇怪的是 onItemRemoved 工作正常，而 onSelected 不触发。

这是我的StackBlitz

我不明白我做错了什么。

有人可以帮助我吗？

谢谢

Answer 1

我认为您只是混淆了 onAdd 和 onSelect 事件。您可能正在寻找的是 ngx-chips 的 onAdd 事件。这是 documentation 的链接对于所有输出事件。

<tag-input [ngModel]="[]" (onAdd)="onAdded($event)" (onSelect)="onSelected($event)" (onRemove)="onItemRemoved($event)">
    <tag-input-dropdown
      [autocompleteItems]="items"
      [showDropdownIfEmpty]="true"
      [dynamicUpdate]="false"            
    >
    </tag-input-dropdown>
  </tag-input>

还有 TS -

onAdded($event: any) {
    console.log("Fire Added");
  }

这是a Stackblitz for demo

如果您看到 Stackblitz，则您的 onSelect 也可以正常工作。这只是一个事件，当您在将标签添加到输入后单击该标签时会触发该事件。我知道命名令人困惑。