ngbModal.open 返回的 Promise 链被跳过

Question

I am implementing data editing in a component. First I must check if one of data fields has been changed, and if so, a confirmation pop-up should open. If user confirms the change, the data will be updated.

From the updateData() method, I am calling the isChangeConfirmed() method which opens the pop-up and checks if the Save button was clicked on the pop-up. If so, it returns true . I expect the control to be returned to the updateData() method after calling the pop-up and checking the result. In the reality, the data is saved first, and then the pop-up window appears. What have I done wrong?

component.html

<button id="saveButton" type="button" (click)="updateData()" translate>BUTTON.SAVE</button>


<!-- POPUP -->

<ng-template #editModal let-modal>
  <button type="submit" id="modalConfirmButton" (click)="modal.close('save')" class="btn btn-primary" translate>BUTTON.CONFIRM</button>
  <button type="reset" id="modalCancelButton" (click)="modal.close('cancel')" class="btn btn-primary" translate>BUTTON.CANCEL</button>
</ng-template>

component.ts

updateData() {
  if (this.isChangeConfirmed()) {

    // Some code which updates data

  }
}

isChangeConfirmed(): boolean {
  if (this.oldValue != this.newValue) {
    this
      .ngbModal
      .open(this.editModal, { ariaLabelledBy: 'editModal' })
      .result
      .then((result) => {
        return result == "save";
      }, (reason) => {
        return false;
      });
  }
  return true;
}

Answer 1

The problem is when you open the modal, the part within (result) => { /*asynchronous part*/ } and (reason) => { /*asynchronous part*/ } runs asynchronously. It cannot be determined when these parts will run in comparison to the parts outside their context. Your return false; statement is within the asynchronous context, but your return true; is outside of it. So even if the return false; piece runs, you cannot know when it will happen, because you don't know when this.ngbModal.open() will produce a result or a reason . It seems like in your case not fast enough, and return true; is faster. But the point is that it's impossible to know.

This is all fine, but you can't put return true; inside (result) => {... return true;} either, because I suppose the compiler will complain that there is no return statement.

There are two ways to solve it that I can think of:

• You get rid of the separate function, put everything in one function, and put // Some code which updates data inside (result) => {... /* Some code which updates data*/ }
• Or if you really want to have a separate function, then what you need to do is not returning a boolean , but return an Observable , and subscribe to that Observable in updateData() . Look it up how you can pipe the two answers, (result) and (reason) into one single Observable , how to join them, create an Observable out of this, and return that.

If you go with the second option, I suggest you look at RxJS Operators ( https://rxjs.dev/guide/operators ). Also, reading articles on reactive programming can be useful.