Как отменить выбор Primeng SelectButton?

Question

Я пытаюсь отменить выбор primeng p-SelectButton по выбору пользователя. У меня есть дочерний компонент, в котором я использовал p-SelectButton. А родительский компонент отображает дочерний компонент. При выборе нового значения в кнопке выбора отображается окно подтверждения, если пользователь хочет продолжить. Если пользователь решает отменить, выбор должен go вернуться к предыдущему значению. Я могу добиться этого, используя двустороннюю привязку модели между родительским и дочерним компонентами. Когда пользователь выбирает отмену, я возвращаю значение модели к предыдущему значению. Но класс css "ui-state-focus" все еще добавляется к новому выделению и выглядит в фокусе. предыдущее значение отображается как выбранное, но новое значение отображается как в фокусе. Я попытался удалить этот класс в событии щелчка, и он удаляется, и когда я продолжаю отладку, он каким-то образом возвращается. Есть ли способ удалить этот класс? после того, как все события срабатывают? Или простой способ добиться этого (отменить выбор).

образ

На изображении новое выбранное значение «Дом» по-прежнему отображается в фокусе.

*onclickEventParent(event) {    
    if (this.revertSelection) {
      **this.selectedFlatTypeParent = this.previousselectedFlatTypeValParent;**
      this.revertValueinClickMethodParent = false;
    } else {
      this.previousselectedFlatTypeValParent = this.selectedFlatTypeParent;
      this.currentValselectedFlatTypeParent = this.selectedFlatTypeParent;
    }
  }*

Проблема, которую я пытаюсь решить, заключается в том, что после возврата значения обратно новое значение все еще показывают в фокусе. Класс «ui-state-focus» по-прежнему добавляется к новому элементу значения. На изображении вы можете видеть, что «Дом» все еще выделен. Я попытался удалить это - "ui-state-focus" в компоненте. Но в итоге все равно добавляется. Заранее спасибо !!

Answer 1

Вам необходимо использовать одностороннюю привязку и назначить новое или предыдущее значение для события onModelChange.

<p-selectButton [options]="types" [ngModel]="selectedFlatTypeParent" (ngModelChange)="onChange($event)"></p-selectButton>

и обработчик событий с помощью setTimeout трюка

  onChange(value: any) {
    // I use simple confirm, you can replace with your confirm way
    if (confirm("Are you sure?")) {
      this.selectedFlatTypeParent = value;
    } else {
      let previous = this.selectedFlatTypeParent;
      this.selectedFlatTypeParent = null;
      setTimeout(() => {
        this.selectedType = previous;
      });
    }
  }

Вот демо