如何检测何时从 Primeng 自动完成中删除项目 | Angular 6
How to detect when an item is removed from an Primeng autocomplete | Angular 6
我正在使用动态 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
根据 documentation,当删除选定值时调用 onUnselect()
回调方法。 $event
参数为multiple模式下未选中的值。
我建议不要将 emitData()
绑定到 onSelect()
和 onUnselect()
方法,而是为每个方法使用单独的方法,如下所示:
(onSelect)="emitAddData($event)"
(onUnselect)="emitRemoveData($event)"
然后绑定到 onUnselect()
的那个可以处理当一个项目被移除时你需要做的任何事情。
我正在使用动态 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
根据 documentation,当删除选定值时调用 onUnselect()
回调方法。 $event
参数为multiple模式下未选中的值。
我建议不要将 emitData()
绑定到 onSelect()
和 onUnselect()
方法,而是为每个方法使用单独的方法,如下所示:
(onSelect)="emitAddData($event)"
(onUnselect)="emitRemoveData($event)"
然后绑定到 onUnselect()
的那个可以处理当一个项目被移除时你需要做的任何事情。