PrimeNG MultiSelect组件选择变更时添加用户确认逻辑的实现咨询

完全可以通过(onChange)事件实现该需求，核心注意点是PrimeNG的multiSelect触发onChange时，双向绑定的ngModel值已经被自动更新，所以需要额外存储上一次确认生效的选中值，用于回滚操作。

1. 额外声明一个变量存储已确认的选中值，避免引用类型的赋值问题，建议用扩展运算符做值拷贝
2. 初始化时将该变量赋值为选中值的初始状态
3. 确认操作时更新存储的已确认值，拒绝操作时直接把双向绑定的变量重置为已存储的旧值

组件模板代码 #

<p-multiSelect 
  [options]="availableLanguages" 
  [(ngModel)]="languages" 
  name="languages" 
  (onChange)="myChangeFunction($event);" 
  class="multiselect-custom">
</p-multiSelect>
<!-- 记得在模板里加入confirm dialog的占位标签 -->
<p-confirmDialog></p-confirmDialog>

组件类代码 #

import { ConfirmationService } from 'primeng/api';

@Component({
  // 你的组件原有配置
  providers: [ConfirmationService]
})
export class YourComponent implements OnInit {
  availableLanguages = []; // 你的下拉选项列表
  languages = []; // 当前双向绑定的选中值
  previousLanguages = []; // 存储上一次确认生效的选中值

  constructor(private confirmationService: ConfirmationService) {}

  ngOnInit() {
    // 初始化时同步初始选中值到存储变量
    this.previousLanguages = [...this.languages];
  }

  myChangeFunction(event: any) {
    this.confirmationService.confirm({
      message: '是否确认本次修改？',
      acceptLabel: '是',
      rejectLabel: '否',
      accept: () => {
        // 确认后更新存储的生效值
        this.previousLanguages = [...event.value];
      },
      reject: () => {
        // 拒绝后回滚双向绑定的值，视图会自动同步更新
        this.languages = [...this.previousLanguages];
      }
    });
  }
}

• 必须在对应模块导入ConfirmDialogModule和注册ConfirmationService，否则弹窗无法正常触发
• 数组赋值时使用扩展运算符做浅拷贝，如果你的选项是复杂对象，建议用深拷贝方法避免引用干扰
• PrimeNG 12.x和Angular 12.x版本完全兼容上述写法，无需额外升级依赖

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