点击确认弹窗取消按钮时重置PrimeNg inputSwitch状态的问题

问题核心：点击InputSwitch时UI会立即切换状态，取消确认后未将状态回滚到原始值。通过临时状态变量单独控制开关显示，确认后再同步到业务模型即可解决。

步骤1：修改HTML绑定 #

将原单向绑定改为绑定到临时状态变量，用双向绑定[(ngModel)]确保UI与临时变量同步：

<!-- 若在*ngFor循环中渲染多个quote，给每个quote绑定对应临时状态 -->
<p-inputSwitch [(ngModel)]="tempChecked[quote.id]" 
  (onChange)="onChangeMainQuote($event, opportunity, quote.id)"> 
</p-inputSwitch>

步骤2：初始化临时状态变量 #

在组件类中定义临时状态对象，并在获取业务数据后初始化每个quote的选中状态：

// 临时存储每个quote的开关状态
tempChecked: { [quoteId: string]: boolean } = {};

// 在获取opportunity和quotes数据后执行初始化
initTempChecked() {
  this.quotes.forEach(quote => {
    this.tempChecked[quote.id] = this.opportunity.mainQuoteId === quote.id;
  });
}

步骤3：调整确认逻辑 #

在onChangeMainQuote方法中，先将开关状态回滚到原始值，再根据确认结果决定是否更新业务模型：

onChangeMainQuote(event, opportunity: Opportunity, mainQuoteId: string) {
  // 立即回滚开关状态到原始值（点击后UI已切换，先还原）
  this.tempChecked[mainQuoteId] = !event.checked;

  this.confirmationDialogService.confirm('Changement de devis principal',
      'Etes-vous sur de vouloir changer de devis principal ?', 'LABEL_CONFIRM_DELETION', 'LABEL_CANCEL')
      .then((confirmed) => {
          if (confirmed) {
              // 确认后更新业务模型
              opportunity.mainQuoteId = mainQuoteId;
              // 同步当前quote选中状态，同时取消其他quote的选中（单选场景）
              Object.keys(this.tempChecked).forEach(id => {
                this.tempChecked[id] = id === mainQuoteId;
              });
              this.cdr.detectChanges();
          }
      })
      .catch(() => {
          // 异常时确保状态与业务模型一致
          this.tempChecked[mainQuoteId] = opportunity.mainQuoteId === mainQuoteId;
      });
}

补充说明 #

• 临时状态变量tempChecked用于隔离UI显示与业务模型，避免直接操作业务模型导致的状态不一致。
• 若业务不要求单选，可移除“取消其他quote选中状态”的循环代码。

内容的提问来源于stack exchange，提问作者R.Walid