如何恢复primeng SelectButton的选择？

Question

我正在尝试根据用户选择恢复对primeng p-SelectButton 的选择。我有一个使用 p-SelectButton 的子组件。而父组件渲染子组件。在选择按钮中选择新值时，如果用户想要继续，则会显示一个确认框。如果用户选择取消，则选择应返回到先前的值。 我可以使用父组件和子组件之间模型的双向绑定来实现这一点。在用户选择取消时，我将模型值更改回之前的值。 但是，css 类“ui-state-focus”仍被添加到新选择中，并且看起来是焦点。先前的值显示为选中，但新值显示为焦点 我尝试在点击事件中删除这个类，它被删除了，当我继续调试时，它以某种方式被添加回来。有没有办法删除这个类？在所有事件都被触发之后？或者一种简单的方法来实现这一点（撤消选择）。

在图像中，新选择的值“House”仍然显示为焦点。

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

我要解决的问题是，一旦恢复该值，新值仍会显示为焦点。 “ui-state-focus”类仍然添加到新的 value 元素中。在图像中，您可以看到“房子”仍然突出显示。我已经尝试在组件中删除这个 - “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;
      });
    }
  }

这里是demo