html - 在primeng多选上清除所有按钮

Question

嗨，我正在开发一个 Angular4 应用程序，而对于 UI，我正在使用 Primeng。

我有一个多选元素，其行为与此处的行为几乎相同https://www.primefaces.org/primeng/#/multiselect

我唯一想要不同的是在下拉菜单上，当单击“X”（关闭）按钮时，我希望它清除所有选择而不是关闭下拉菜单本身。

有没有办法在primeng中实现这一点？

帮助表示赞赏！

Answer 1

您可以通过jquery手动触发左侧的复选框。

声明 var jquery:any;

声明 var $ :any;

$('.ui-chkbox-box.ui-widget.ui-corner-all.ui-state-default').trigger('click')

或者您使 p-multiselect 的值等于 []。

前任。

//html
 <p-multiSelect #multiselect> 
    <button type="button" (click)="functionToClear(multiselect)"</button> 
 </p-multiselect>

//ts
functionToClear(multiselect): void {
     multiselect.value = [];
}

Answer 2

这是不可能的，但是您可以通过单击左角的复选框两次来清除所有选择。

Answer 3

虽然它不是 Multiselect PrimeNg 组件的受支持功能，但如果您真的希望它这样做，则必须手动编辑组件multiselect.js，并修改该close(event)功能以执行您想要的操作。

Answer 4

通常，primeng 中的多选输入绑定到保存所选成员的属性，通常是数组。

例如，您可以使用重置按钮，当单击该按钮时，它将清空该属性/数组，这将清除多选的所有选定复选框。

Answer 5

您可以使用 formGroup 并尝试通过以下方式清除值：

html:

<ng-multiselect-dropdown [(ngModel)]="data"
                                        [data]="fetchedData" [settings]="customeSettings"
                                        formControlName="myControl">
                                    </ng-multiselect-dropdown>

.ts：

this.form_name.controls.myControl.setValue("");