如何在 Angular 中访问 HTTP 事件主体？答案

【问题标题】：How do I access HTTP event body in Angular?如何在 Angular 中访问 HTTP 事件主体？
【发布时间】：2019-06-27 17:18:42
【问题描述】：

我在我的代码中使用 Angular 文件上传。我正在使用 HTTP 事件来跟踪文件上传的进度。之后，我想将从响应接收到的数据映射到接口，但我无法访问响应的正文。

这是我跟踪上传进度并获取响应正文的代码：

public async UploadRcptList() {
    for (const droppedFile of this.fileUploadManager) {

      // Is it a file?
      if (droppedFile.file.fileEntry.isFile) {
        const fileEntry = droppedFile.file.fileEntry as FileSystemFileEntry;

        fileEntry.file((file: File) => {
          this.Uploader.recipientUpload(file, this.chosenValue).subscribe(
            event => {
              if (event.type === HttpEventType.UploadProgress) {
                this.fileUploadManager[0].progress = ((event.loaded / event.total) * 100);
              }
              if (event.type === HttpEventType.Response) {
                console.log(event);
                console.log("We have response:" + event.body);
                this.Uploader.setLists(event.body as Mixed);
                //if(count ==1)
                this.emptyFilesArray()
                //else count--;
              }
            }
          )
        });
      }

      else {
        const fileEntry = droppedFile.file.fileEntry as FileSystemDirectoryEntry;
        console.log(droppedFile.file.relativePath, fileEntry);
      }
    }

在这里，当我尝试记录事件时，我得到了一个 JSON 的整个响应，看起来像这样：

{
    "status": "SUCCESS",
    "data": {
        "attachmentList": [
            {
               ...
            }
        ],
        "recipientList": [
            {
                ...
            },
        ]
    },
    "errorMsg": null
}

但是，当我尝试记录 event.body 时，我得到 [object Object]。如何访问响应正文中的“数据”属性？

这是我的服务代码：

public recipientUpload(file: File, type: string) {
    const details = {
       ...
    }
    formData.append('reqjson', JSON.stringify(details))
    formData.append('file', file);

    return this.http.request(new HttpRequest('POST', 'https://xyz.abc/fileUpload', formData, { reportProgress: true }));
}

如果我没记错的话，event.body 应该给我整个 JSON 响应，对吗？我尝试访问 event.body.data，但我收到一条错误消息，提示 event.body 上不存在数据。如何访问响应中的“数据”属性？

【问题讨论】：

标签： angular

【解决方案1】：

你可以试试看

 var myJSON = JSON.stringify(event);
 console.log(myJSON.yourfield);

【讨论】：