Angular

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 事件。这是所有输出事件的 link 到 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 也能正常工作。它只是一个事件，在您将标签添加到输入后单击该标签时会触发该事件。令人困惑的命名，我知道。

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

Angular - OnSelected function not works on tag-input

javascript

typescript

ngx-chips