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

您可以使用 formGroup 並嘗試通過以下方式清除值：

html：

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

.ts：

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

Answer 5

通常，primeng 中的多選輸入綁定到一個包含所選成員的屬性，通常是一個數組。

您可以使用重置按鈕，例如，當單擊時，它將清空該屬性/數組，這將清除多選的所有選定復選框。

Answer 6

從 PrimeNg 版本 13 開始，您可以使用[showClear]="true"屬性在控件值旁邊顯示一個“X”圖標。