PrimeNG - 带用户确认的多重选择

Question

我有一个

multiSelect

组件，我希望每当用户更改其选定的选项时都显示确认消息，询问他们是否要继续进行该更改，并根据他们的答案回滚更改或应用它们。

不幸的是，我没有找到任何内置功能来实现此目的，有什么方法可以在

(onChange)

活动期间应用上述功能吗？

示例：

<p-multiSelect [options]="availableLanguages" [(ngModel)]="languages" 
                               name="languages"
                               (onChange)="myChangeFunction($event);"
                               class="multiselect-custom">


myChangeFunction(event: any) {
  this.confirmationService.confirm({
    message: 'Are you sure?',
    acceptLabel: 'Yes',
    rejectLabel: 'No',
    accept: () => {
       // do that change if user presses "Yes"
    },
    reject: () => {
      // rollback the change if user presses "No"
    }
  });
 }

角度版本：12.2.3

PrimeNG版本：12.1

Answer 1

因此，正如评论部分中所述，我最终采用了一个自定义解决方案来解决此问题，方法是在多选

change

事件发生之前保留值的副本，以便 如果用户在确认对话框上授予权限如图所示，我们保留更改并且如果用户未在确认对话框上授予权限，我们通过设置为上一个副本的实际值来回滚更改。

代码示例如下所示：

.html 文件

<p-multiSelect [options]="availableLanguages" [(ngModel)]="languages" 
                           name="languages"
                           (onChange)="myChangeFunction($event);"
                           class="multiselect-custom">

.ts 文件

languages = [....]; // this is our variable carrying the actual values
languagesCopy = []; // this is our "copy-variable" helper for rollback  


ngOnInit(): void {
  // initialize the "languagesCopy" to have same value with "languages"
  this.languagesCopy = this.languages;
}

myChangeFunction(event: any) {
  this.confirmationService.confirm({
  message: 'Are you sure?',
  acceptLabel: 'Yes',
  rejectLabel: 'No',
  accept: () => {
   // do nothing since the change has already take place
 },
 reject: () => {
  // rollback the change if user presses "No"
  // "languages" have already changes since it is binded through 
  //  [ngModel] from the multiSelect change event, so set the languages 
  //  variable back to its previous value stored in "languagesCopy"
   this.languages = this.languagesCopy;
 }
 });
}

我不知道是否有更好的方法来实现上述场景，但这个解决方案非常适合我的情况:)

Answer 2

<ng-template pTemplate="headercheckboxicon" let-allSelected let-partialSelected="partialSelected">
    <ng-container *ngIf="allSelected; else partialOrNone">
        <i class="pi pi-check"></i>
    </ng-container>
    <ng-template #partialOrNone>
        <ng-container *ngIf="partialSelected; else noneSelected">
            <i class="pi pi-minus" [ngStyle]="{ color: 'var(--text-color)' }"></i>
        </ng-container>
        <ng-template #noneSelected>
            <i class="pi pi-times"></i>
        </ng-template>
    </ng-template>
</ng-template>