Ionic/Angular中关闭模态框时保留已选筛选条件的问题

这个问题我太熟悉了！本质原因是你关闭模态框时，在没有新选择的情况下返回了null，而你的回调逻辑可能直接用这个null覆盖了原本已选中的国家，导致筛选条件被清空，所有数据都显示出来了。下面给你两种靠谱的修复方案：

方案一：让模态框始终返回当前选中的国家状态 #

这种方法更稳妥，确保模态框关闭时返回的永远是有效的选中值（要么是用户新选的，要么是打开模态框时已经选中的）。

步骤1：在模态框组件（modal.ts）中保存选中状态 #

首先在模态框里定义一个变量来跟踪当前选中的国家，比如：

// modal.ts
selectedCountry: string; // 根据你的实际数据类型调整，比如可能是对象

// 用户选择国家时，同步更新这个变量
onCountrySelected(country: string) {
  this.selectedCountry = country;
  // 其他选择逻辑（比如更新UI选中状态）...
}

步骤2：修改closeModal方法，返回当前选中值 #

把原来的closeModal改成这样，不再返回null：

closeModal(data?: any) {
  // 优先用用户新选择的data，没有的话用已保存的selectedCountry
  const result = data ? data : this.selectedCountry;
  this.viewCtrl.dismiss(result);
}

步骤3：回调逻辑保持正常处理 #

回到country.ts的回调，现在即使用户没选新国家就关闭模态框，返回的data也是之前选中的国家，筛选条件不会丢失：

myModal.onDidDismiss(data => {
  let selectedCountry = data;
  console.log(selectedCountry);
  if (selectedCountry) {
    // 执行你的筛选逻辑
    this.filterDataByCountry(selectedCountry);
  } else {
    // 仅当一开始就没有选中任何国家时才展示全部数据
    this.showAllData();
  }
});

方案二：在回调中仅更新有效数据（无需修改模态框） #

如果你不想改动模态框的代码，可以在country.ts的回调里做判断，只有当返回的data不为null时，才更新筛选条件，否则保持原来的筛选状态：

// country.ts中先保存当前的筛选条件
currentSelectedCountry: string;

// 模态框回调
myModal.onDidDismiss(data => {
  // 只有当data不是null时，才更新筛选条件
  if (data !== null) {
    this.currentSelectedCountry = data;
    this.filterDataByCountry(this.currentSelectedCountry);
  }
  // 如果data是null，什么都不做，保持之前的筛选效果
});

两种方案都能解决问题，推荐方案一，因为它让模态框的状态更清晰，避免后续逻辑出现类似的漏洞。

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