Angular2 可观察和访问后响应答案

【问题标题】：Angular2 observable & post - access responseAngular2 可观察和访问后响应
【发布时间】：2017-02-23 13:30:22
【问题描述】：

我对 Observables 有点陌生，我已经成功发送了一个 POST api 请求并收到了正确的 JSON 响应：

{"id":138,"date":"2017-02-23T05:10:18"}

但我不确定如何访问此响应并对其进行处理。这是我的邮政服务：

  // sends a media(file blob) object to WP API
  updateMedia(file: File): Observable<File> {
    let headers = new Headers({ 
        'Access-Control-Expose-Headers': 'Authorization, Content-Type, Content-Disposition',
        'Content-Type': 'multipart/form-data',
        'Content-Disposition': 'attachment; filename='+file.name, 
        'Authorization': 'Basic cmh5c0B0aGVpdHRlYW0uY29tLmF1OkRlc3Ryb3lfMSE='
    }); 
    let options = new RequestOptions({ headers: headers }); // Create a request option

    return this.http.post(BASE_API, file, options)
    .map((response: Response) => response.json());
  }

这是我的 Observable：

  onUpdateMedia(file: File) {
    this.mediaService
      .updateMedia(file)
      .subscribe((
        file: File) => {
        this.file = Object.assign({}, this.file, event);
      });
    console.log(event); //hmm not what i want
  }

任何帮助表示赞赏

【问题讨论】：

标签： angular observable angular2-services

【解决方案1】：

您必须从可观察的地图返回响应，然后才能进入subscribe 列表器。像这样

 // sends a media(file blob) object to WP API
  updateMedia(file: File): Observable<File> {
      ............

    return this.http.post(BASE_API, file, options)
    .map((response: Response) => return {res : response.json(), status : response.status});
  }


   onUpdateMedia(file: any) {
    this.mediaService
      .updateMedia(file)
      .subscribe((file: any) => {
        console.log(file, "Response from Post Request Here....")
      });
  }

【讨论】：

【解决方案2】：

您的响应是对象类型。在对象类型的变量中分配响应。

 my_res:any;
  onUpdateMedia(file: File) {
    this.mediaService
      .updateMedia(file)
      .subscribe((
        data: any) => {
        this.my_res=data
      });

  }

【讨论】：