ngbModal.open返回Promise链被跳过，数据保存早于确认弹窗问题

问题根源 #

你遇到的问题本质是异步执行顺序错误：
ngbModal.open().result 是异步Promise对象，调用后不会阻塞主线程运行，你写在.then()回调里的return只会给Promise本身返回值，不会作为isChangeConfirmed()方法的返回值。isChangeConfirmed()执行完打开弹窗的逻辑后，不会等待用户点击弹窗按钮，会直接执行最后的return true，因此updateData()里的判断会直接通过，先运行了数据更新代码，异步的弹窗才会在之后弹出。

修复方案 #

调整方法返回类型为Promise，用async/await等待弹窗结果再执行后续逻辑：

修改后的component.ts代码 #

// 增加async修饰符标记为异步方法
async updateData() {
  // 用await等待弹窗的判断结果
  if (await this.isChangeConfirmed()) {
    // 此处放置你原来的更新数据逻辑
  }
}

// 方法返回值改为Promise<boolean>类型
isChangeConfirmed(): Promise<boolean> {
  if (this.oldValue != this.newValue) {
    // 直接返回弹窗的Promise结果
    return this
      .ngbModal
      .open(this.editModal, { ariaLabelledBy: 'editModal' })
      .result
      .then((result) => {
        return result == "save";
      }, (reason) => {
        return false;
      });
  }
  // 无数据变更时直接返回结果为true的Promise
  return Promise.resolve(true);
}

改动说明 #

• 给updateData方法添加async修饰符，内部通过await关键字等待isChangeConfirmed的返回结果，会阻塞到用户操作弹窗拿到最终判断结果后，再决定是否执行后续的更新逻辑
• isChangeConfirmed不再返回普通布尔值，改为返回Promise对象，弹窗的判断结果会通过Promise透传给上层调用方，无变更场景直接返回状态为已完成、值为true的Promise即可

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