时间戳

首页 > 解决方案 > Angular - OnSelected 函数不适用于标签输入

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

问题描述

我正在使用 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

我不明白我做错了什么。

有人能帮我吗？

谢谢

标签： javascriptangulartypescriptngx-chips

解决方案

我认为你只是在onAdd和onSelect事件之间混淆。可能您正在寻找的onAdd是ngx-chips. 这是所有输出事件的文档的链接。

<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作品也很好。这只是一个事件，当您在将标签添加到输入后单击标签时会触发该事件。混淆命名，我知道。

推荐阅读