如何检测何时从 Primeng 自动完成中删除项目 | Angular 6

Question

我正在使用动态 primeng 自动完成功能让用户 select 多个项目，但我不知道如何检测用户何时按下 x 从列表中删除项目。我知道我可以使用 [(ngModel)] 来检测值的变化，但我的问题是：

有没有像回调函数这样的方法来检测删除的项目x 被按下 ?

定义为：

<p-autoComplete
            #autoCompleteObject
            [(ngModel)]="value" [suggestions]="filteredOptions"
            (completeMethod)="filterObjects($event)"
            [multiple]="true"
            [dropdown]="false"
            (onSelect)="emitData()"
            (onUnselect)="emitData()"
            placeholder="{{ label | i18n}}"
    >
        <ng-template let-item pTemplate="selectedItem">
            <div class="selected-item">
                <span >{{item[labelProperty]}}</span>
            </div>
        </ng-template>
        <ng-template let-item pTemplate="item">
            <div class="flex ">
                <span >{{item[labelProperty] | i18n}}</span>
            </div>
        </ng-template>

    </p-autoComplete>

如旧

 <my-autocomplete-multiple [(ngModel)]="entryItems" label='type_here' [options]=allItems
                                          ngDefaultControl></my-autocomplete-multiple>

如下图，我用红色圈出了x

Answer 1

根据 documentation，当删除选定值时调用 onUnselect() 回调方法。 $event参数为multiple模式下未选中的值。

我建议不要将 emitData() 绑定到 onSelect() 和 onUnselect() 方法，而是为每个方法使用单独的方法，如下所示：

(onSelect)="emitAddData($event)"
(onUnselect)="emitRemoveData($event)"

然后绑定到 onUnselect() 的那个可以处理当一个项目被移除时你需要做的任何事情。

如何检测何时从 Primeng 自动完成中删除项目 | Angular 6

How to detect when an item is removed from an Primeng autocomplete | Angular 6

angular

user-interface

autocomplete

primeng

angular-material-6