使用 for 循环同步角度执行

问题描述

我正在使用后端作为 Spring Boot 的 Angular 9 项目。该项目基本上是CMS类型的。 在这个用户可以使用反应形式生成表单。一个表单可能包含多个文件选择器。我已经实现了在本地路径选择文件和上传文件的代码。

此代码工作正常,但我遇到了同步数据库中实例保存的问题。

我的流程应该是:

  1. 循环上传文件
  2. 使用上传的数据更新对象表单。
  3. 然后应将带有剩余选项和更新上传数据的对象表单保存到数据库中。

但是我的流程没有以正确的方式进行,它正在上传并且没有等待返回结果就去保存数据库,因此没有保存更新的详细信息。

以下是代码流程:

来自按钮保存的点击事件以保存表单数据:

saveClick() {
    for (const element of this.objMetaData) {
      if (element.fieldType === 'file-upload') {
        this.uploadAttachment(element.fieldName);
      }
    }
    this.saveToDatabase();
  }

这应该与更新的详细信息一起保存在最后:

saveToDatabase() {
    let relations = [];
    const instanceBody = {
      objectTypeId: this.objectTypeId,objectInstance: {...this.objectFormGroup.value,relations: relations}
    }
    this.saveInstance(instanceBody);
  }

上传文件并更新对象以保存数据:

uploadAttachment(fieldName: string) {
    let formData = new FormData();
    let fileObj: any = this.fileMap.get(fieldName);
    let fileName = fileObj.name;
    if (fileObj !== undefined) {
      formData.append('file',fileObj);
      this.attachmentService.uploadAttachment(formData).subscribe((result) => {
        if (result != null) {
          let attachmentDir = result;
          let attachmentFileName = fileName;
          let attachment = attachmentDir + '**' + attachmentFileName;
          this.objectFormGroup.value[fieldName] = attachment;             
        } else {              
          console.log("File not uploaded.")
        }
      });
    }
  }

代码流不顺。

this.saveToDatabase();

这是在 for 循环中上载之前调用的。我尝试了很多事情,比如将 forEach 更新为 for 循环、异步、等待等,但都没有正常工作。

如何解决问题使执行同步。

解决方法

暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!

如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@)