时间戳

首页 > 解决方案 > 如何检测项目何时从 Primeng 自动完成中删除 | 角 6

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

问题描述

我正在使用动态primeng自动完成让用户选择多个项目，但我被困在如何检测用户何时按下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用红色 圈出了在此处输入图像描述

标签： angularuser-interfaceautocompleteprimengangular-material-6

解决方案

根据文档，onUnselect()当删除选定的值时调用回调方法。该$event参数是多模式下未选择的值。

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

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

然后，绑定到的那个onUnselect()可以处理您在删除项目时需要做的任何事情。

推荐阅读