Angular中PrimeNG单选框点击弹窗不等待响应 取消后无法回退问题求助

问题根因说明 #

1. 弹窗弹出前状态就切换：是因为你给p-radioButton同时加了**[(ngModel)]双向绑定**，点击事件触发的同时双向绑定已经自动更新了绑定变量和表单值，此时才触发确认弹窗，自然状态先变了。
2. 拒绝后无法回退：双向绑定已经完成值更新，仅调用stopImmediatePropagation无法撤销已经变更的值，需要手动把绑定变量和表单值回退到上一次的有效状态。
3. 服务端patch后选中状态丢失：是因为手动操作单选框值的逻辑没有和表单状态同步，服务端更新表单值后，你本地维护的选中变量没有同步更新，导致单选框渲染的状态和表单值不一致。

完整解决方案 #

1. 调整单选框模板，移除双向绑定

把[(ngModel)]改成单向只读绑定[ngModel]，禁止自动更新值，所有值变更都由你手动控制：

<div class="right" *ngFor="let type of types">
  <p-radioButton  
    name="treesDetailsType"  
    [ngModel]="oneselectedType" 
    formControlName="selectedType" 
    (click)="onChangeType(type.id, $event)" 
    class="treeDetails" 
    value="{{type.id}}" 
    label="{{type.desc}}" 
    [disabled]="isReadOnly && type.id != data.selectedType"
  ></p-radioButton>
</div>

原有的@HostListener修饰的onReject方法可以直接删除，无需再做事件阻止。

2. 新增旧值存储变量，调整点击逻辑

组件内新增变量存储上一次有效的选中值，点击单选框时先弹窗确认，用户同意再更新值，不同意就保留旧值：

// 存储上一次有效的选中值
oldSelectedValue: any;

ngOnInit() {
  // 初始化时赋值旧值
  this.oldSelectedValue = this.oneselectedType;
}

onChangeType(newValue: any, $event) {
  const isFormTouched = this.isFormTouched(newValue);
  if (isFormTouched) {
    this.messagingService.showConfirmById(44, () => {
      // 用户确认：更新绑定变量、表单值、旧值
      this.oneselectedType = newValue;
      this.fg.controls.selectedType.setValue(newValue);
      this.oldSelectedValue = newValue;
      this.onConfirm();
    }, () => {
      // 用户拒绝：回退到旧值，单选框会自动根据ngModel更新选中状态
      this.oneselectedType = this.oldSelectedValue;
      this.fg.controls.selectedType.setValue(this.oldSelectedValue);
    });
  } else {
    this.oneselectedType = newValue;
    this.oldSelectedValue = newValue;
    this.onchangedTrue(newValue);
  }
}

3. 修复服务端patch值丢失问题

服务端调用patchValue更新表单后，同步更新本地维护的选中变量和旧值即可：

// 服务端赋值示例
const serverValue = 接口返回的选中值;
this.fg.patchValue({
  selectedType: serverValue
});
// 同步更新本地变量
this.oneselectedType = serverValue;
this.oldSelectedValue = serverValue;

如果需要更通用的方案，可以监听表单控件的值变化自动同步：

import { skip } from 'rxjs/operators';

ngOnInit() {
  this.oldSelectedValue = this.oneselectedType;
  // 监听表单值变化，自动同步本地变量，跳过初始化时的第一次触发
  this.fg.get('selectedType')?.valueChanges
  .pipe(skip(1))
  .subscribe(val => {
    this.oneselectedType = val;
    this.oldSelectedValue = val;
  })
}

内容的提问来源于stack exchange，提问作者Yoel Perkal