Question

我正在使用 Angular 8 + 。我有一项将文件上传到服务器并显示进度栏的服务。服务方法是

upload(data): Observable<HttpEvent<any>> {
  const url = 'endpoint';

  return this.http.request(url, data);
}

我在组件中订阅的内容相同

this.myService.upload(data).subscribe(res => {
  const id = res.body.id;
  const loaded = res.loaded;
}

但这给了错误

Property 'loaded' does not exist on type 'HttpEvent<any>'.   
Property 'loaded' does not exist on type 'HttpSentEvent'.

body的错误也相同。

request返回一个HttpEvent<any>的Observable，而HttpEvent是的并集

export declare type HttpEvent<T> = HttpSentEvent | HttpHeaderResponse | HttpResponse<T> | HttpProgressEvent | HttpUserEvent<T>;

为什么会出现错误？ HttpProgressEvent具有loaded属性。

看来Angular只选择第一个接口HttpSentEvent。

Answer 1

使用http观察选项。它将返回完整响应。

upload(data): Observable<HttpEvent<any>> {
  const url = 'endpoint';
  return this.http.request(url, data, {reportProgress: true, observe: 'events'});
}

在组件中检查事件类型是否为HttpEventType.response，如果是，则访问其中的值

this.myService.upload(data).subscribe(event => {
 if (event.type === HttpEventType.UploadProgress) {
      // loader
    } else if (event.type === HttpEventType.Response) {
     const id = event.body.id;
     const loaded = event.loaded;
    }

}

Documentation

类型'HttpEvent <any>'不存在属性'loaded'

1 个答案: