Angular - OnSelected function 不適用於標簽輸入

Question

我正在使用 ngx-chips，但我無法實現 OnSelected function。

在我的 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事件。 這是所有 output 事件的文檔鏈接。

<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");
  }

這是演示的 Stackblitz

如果您看到 Stackblitz，您的onSelect也可以正常工作。 這只是一個事件，當您在將標簽添加到輸入后單擊標簽時會觸發該事件。 混淆命名，我知道。