PrimeNG - Множественный выбор с подтверждением пользователя

#angular #primeng #multi-select

Вопрос:

У меня есть multiSelect компонент, и я хочу, чтобы каждый раз, когда пользователь изменяет выбранные им параметры, отображалось сообщение с подтверждением, спрашивающее, хотят ли они продолжать это изменение или нет, и в соответствии с их ответом откат изменений или их применение.

К сожалению, я не нашел никаких встроенных функций для достижения этой цели, могу ли я каким-либо образом применить описанные выше функции во время (onChange) мероприятия?

Пример:

 lt;p-multiSelect [options]="availableLanguages" [(ngModel)]="languages"   name="languages"  (onChange)="myChangeFunction($event);"  class="multiselect-custom"gt;   myChangeFunction(event: any) {  this.confirmationService.confirm({  message: 'Are you sure?',  acceptLabel: 'Yes',  rejectLabel: 'No',  accept: () =gt; {  // do that change if user presses "Yes"  },  reject: () =gt; {  // rollback the change if user presses "No"  }  });  }

Угловая версия: 12.2.3

Версия PrimeNG: 12.1

1. Итак, ваш вопрос заключается в том, что диалоговое окно подтверждения не отображается? Или?

2. Нет, в диалоговом окне подтверждения отображается файл, но множественный выбор изменяется до того, как пользователь даст разрешение в журнале подтверждений, я принял решение, которое отменяет изменение в случае, если пользователь не дает своего разрешения, сохраняя копию значений до того, как произойдет событие изменения множественного выбора

Ответ №1:

Так, как указано в разделе комментариев, я в конечном итоге делает пользовательских решений, чтобы решить эту проблему, сохраняя копию значения перед множественный change события разворачиваются так, что если пользователь дает разрешение на подтверждение диалоговое окно, показанное, мы сохраняем изменения, и если пользователь не дает разрешения на окно подтверждения, то откат изменений путем установления фактической стоимости предыдущей копии.

Пример кода показан ниже:

.html файл

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

файл .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: () =gt; {  // do nothing since the change has already take place  },  reject: () =gt; {  // 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;  }  }); }

Я не знаю, есть ли лучший способ реализовать сценарий, описанный выше, но это решение отлично подходит для моего случая 🙂