Angular 2 foreach 在数组被另一个函数更改之前执行

Question

我在使用数组时遇到了一些问题，我必须在 foreach 中更改并再次使用它。以下是部分代码：

this.selectedDepartementen.forEach(element => {
      this.DepID = element.ID;
      if (this.USERSDepIDs.indexOf(this.DepID) == -1) {
        this.insertDepartementCoupling(this.DepID, this.USERid, this.AJID, res => {
          if (res) {
            this.loading = false;
            return;
          }
          this.removeAllFromArray(this.USERSDepIDs, this.DepID, res => {
            this.USERSDepIDs = res;
          })
        })
      } else
      {
        this.updateDepartementCoupling(this.DepID, this.USERid, this.AJID, res => {
          if (res) {
            this.loading = false;
            return;
          }
          this.removeAllFromArray(this.USERSDepIDs, this.DepID, res => {
            this.USERSDepIDs = res;
          })
        })
      }
    });

如您所见，我是否调用了函数removeAllFromArray 来删除最后使用的DepID。但是 foreach 不会等待那个函数，它只是继续运行。我猜这是一个异步的东西，但我该如何解决呢？

提前致谢！

编辑

为用户 Duncan 添加函数insertDepartementCoupling。

async insertDepartementCoupling(DepID, USERid, AJID, callback) {
    var test = await this.departementService.insertDepartementCoupling(DepID, USERid, AJID).subscribe(
      data => this.mockdata = data,
      error => {
        this.showMessage("error", "Departement koppeling niet gelukt!", "Departement koppeling niet gelukt, zie console voor meer informatie.");
        callback(true);
      },
      () => {
        if (this.mockdata._body) {
          this.showMessage("error", "Departement koppeling niet gelukt!", "Contacteer de administrator!");
          callback(true);
        } else {
          this.showMessage("succes", "Departement koppeling geslaagd!", "Gebruiker is gekoppeld aan de departement(en).");
          callback(false);
        }
      });
  }

Answer 1

如果您更改insertDepartmentCoupling 和updateDepartementCoupling 以便它们返回一个promise，而不是回调，该promise 将通过传递给回调的结果进行解析，并且您也对removeAllFromArray 执行相同的操作（是否完全需要异步吗？），然后制作包含您发布的代码async的函数，然后您可以使用类似这样的代码：

for (const element of this.selectedDepartementen) {
    this.DepID = element.ID;
    if (this.USERSDepIDs.indexOf(this.DepID) == -1) {
        if (await this.insertDepartementCoupling(this.DepID, this.USERid, this.AJID)) {
            this.loading = false;
        } else {
            this.USERSDepIDs = await this.removeAllFromArray(this.USERSDepIDs, this.DepID);
        }
    } else {
        if (await this.updateDepartementCoupling(this.DepID, this.USERid, this.AJID)) {
            this.loading = false;
        } else {
            this.USERSDepIDs = await this.removeAllFromArray(this.USERSDepIDs, this.DepID);
        }
    }
}

请注意，使用 typescript 您可以使用 for..of 来迭代数组而不是 forEach 并避免再次回调。

这段代码现在很清楚它是如何执行的，特别是for 循环将一次执行一次迭代，等待一切完成，但它仍然是完全异步的。包含它的函数必须使用 async 关键字声明，并且它本身必须返回一个 Promise，您可以通过 await 或通过 .then() 回调处理。

您的insertDepartementCoupling 函数已经是异步的，并且在内部使用了一个观察者，因此删除回调并返回一个承诺的最简单方法就是在可观察对象上使用toPromise()。该承诺将以最后一个数据值完成，但您可以使用 .then() 获取您想要返回的布尔值：

async insertDepartementCoupling(DepID, USERid, AJID): Promise<boolean> {
    let result = false;
    var test = await this.departementService.insertDepartementCoupling(DepID, USERid, AJID).subscribe(
      data => this.mockdata = data,
      error => {
        this.showMessage("error", "Departement koppeling niet gelukt!", "Departement koppeling niet gelukt, zie console voor meer informatie.");
        result = true;
      },
      () => {
        if (this.mockdata._body) {
          this.showMessage("error", "Departement koppeling niet gelukt!", "Contacteer de administrator!");
          result = true;
        } else {
          this.showMessage("succes", "Departement koppeling geslaagd!", "Gebruiker is gekoppeld aan de departement(en).");
          result = false;
        }
      }).toPromise();
     return result;
  }

或者，您可以尽快将Observable 转换为承诺，然后您就不需要中间变量了：

async insertDepartementCoupling(DepID, USERid, AJID): Promise<boolean> {
    return this.departementService.insertDepartementCoupling(DepID, USERid, AJID).toPromise()
    .then(
      data => {
        this.mockdata = data
        if (this.mockdata._body) {
          this.showMessage("error", "Departement koppeling niet gelukt!", "Contacteer de administrator!");
          return true;
        } else {
          this.showMessage("succes", "Departement koppeling geslaagd!", "Gebruiker is gekoppeld aan de departement(en).");
          return false;
        }
      },
      error => {
        this.showMessage("error", "Departement koppeling niet gelukt!", "Departement koppeling niet gelukt, zie console voor meer informatie.");
        return true;
      });
  }