需要帮助在 angular 中执行 PUT 函数后执行 GET

Question

我在 angular 中创建了一个弹出窗口，可以编辑具有名称和图像的主题属性并更新 (PUT) 到服务器。

保存后，我的组件将 GET 显示在视图中的主题，基于由弹出窗口 return 编辑的 Id。这里的 PUT 方法运行比 GET 慢得多，导致我的视图无法更新，因为它 GET 旧主题，而不是更新的主题。

当我关闭对话框时调用 PUT 函数。关闭后，我订阅以获取主题结果，以及运行 GET 函数。

topic.component.ts, editTopic() 当我点击编辑按钮时调用方法，将所选主题传递给对话框数据然后弹出。关闭后，我得到结果（这是更新的主题）和 GET 服务器中的主题，主题 ID 再次出现。

  private openEditDialog(topic: Topic) {
    let dialogConfig = new MatDialogConfig();
    dialogConfig.panelClass = 'edit-dialog-component';
    dialogConfig.width = '1027px';
    dialogConfig.height = '491.12px';
    dialogConfig.position = {top: '138px'};
    dialogConfig.data = topic;
    return dialogConfig;
  }

  public editTopic(topic: Topic): void {

    const dialogRef = this.matDialog.open(EditDialogComponent, this.openEditDialog(topic));

    dialogRef.afterClosed().subscribe(
      (res: any) => {
        if (res) {
          this.getTopicById(res.get('id').value);
        }
      },
      (err) => console.error(err)
      );
  }

edit-dialog.component.ts, onSave 运行当我点击保存时，post 图片文件和主题名称到服务器 return FormGroup在视图中显示的值

    public onSave(): void {
      const formData = new FormData();
      let topic = { 
        id: this.topicForm.get('id').value,
        name: this.topicForm.get('title').value
      };
      formData.append('newsTopic', JSON.stringify(topic));
      if (this.file) {
        formData.append('file', this.file);
      }
      console.log(formData);
      this.topicService.updateTopicImage(formData)
      .subscribe((res) => {
        if (res) {
          this.topicForm.patchValue({
            id: res.id,
            title: res.name,
            imageURL: res.image
          });
        }

      });
      this.dialogRef.close(this.topicForm);
    }

updateTopicImage PUT 表单数据到服务器

  public updateTopicImage(formData) {
    return this.httpClient.put<any>(APIurl, formData);
  }

我预计 GET 到运行在 PUT 之后，因为 subscribe() 方法。但似乎它们运行同时（？）和 PUT 只是在需要更新图像文件时速度较慢。不知道怎么解决，希望大家看看。

Answer 1

在订阅中移动关闭并发送 id，然后使用它应该可以工作，因为订阅将在数据完成修补时关闭，并且不会像现在这样提前关闭以及发送 id将使您不必再进行查询

Answer 2

我认为你的问题来自

this.dialogRef.close(this.topicForm);

这里的问题是您在服务器上调用了 PUT 方法，并且在关闭弹出窗口之前没有等待服务器的响应。

你能试试这个吗

   public onSave(): void {
      const formData = new FormData();
      let topic = { 
        id: this.topicForm.get('id').value,
        name: this.topicForm.get('title').value
      };
      formData.append('newsTopic', JSON.stringify(topic));
      if (this.file) {
        formData.append('file', this.file);
      }
      console.log(formData);
      this.topicService.updateTopicImage(formData)
      .subscribe((res) => {
        if (res) {
          this.topicForm.patchValue({
            id: res.id,
            title: res.name,
            imageURL: res.image
          });

          // I've put the return inside the response of the PUT call.
          this.dialogRef.close(this.topicForm);
        }
      });
    }

编辑

为这个改变这个方法

 public updateTopicImage(formData) {
    return this.httpClient.put<any>(APIurl, formData.value);
  }

您不能将表单发送到 API，您必须将表单内的对象发送到 API。

需要帮助在 angular 中执行 PUT 函数后执行 GET

Need help executing GET after PUT function in angular

put

httprequest

angular