javascript - 类型 'Observable<Response> ' 不可分配给类型 'Observable<HttpResponse<Blob>>'

Question

任何帮助或提示将不胜感激! 我正在使用 Angular 8 并尝试为 blob 文件创建可下载链接。 在 Visual Studio 代码中，我在 file.service.ts 中收到以下错误: 类型“Observable”不可分配给类型“Observable>”。类型“Response”缺少“HttpResponse”类型中的以下属性:body、clone ts

我的服务代码中出现以下错误:

                ERROR in src/app/file.service.ts:15:3 - error TS2322: Type 'Observable<Response>
            ' is not assignable to type 'Observable<HttpResponse<Blob>>'.
              Type 'Response' is missing the following properties from type 'HttpResponse<Bl
            ob>': body, clone

            15      return this.http.get('http://localhost:4200/#/LabViewerRTF', { responseT
            ype: ResponseContentType.Blob });
                ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
            ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

这是我的 file.service.ts 文件:

                import { Injectable } from '@angular/core';
            import {HttpResponse} from '@angular/common/http';
            import {Http, ResponseContentType} from '@angular/http';

            import {Observable} from 'rxjs';

            @Injectable({
              providedIn: 'root'
            })
            export class FileService {

              constructor(private http: Http) {}

              downloadFile(): Observable<HttpResponse<Blob>>{       
                    return this.http.get('http://localhost:4200/#/LabViewerRTF', { responseType: ResponseContentType.Blob });
               }
            }

这是我的 app.component.ts:

                import { Component } from '@angular/core';
            import { FileService } from './file.service';
            import { HttpResponse } from '@angular/common/http';


            @Component({
              selector: 'app-root',
              templateUrl: './app.component.html',
              styleUrls: ['./app.component.css']
            })
            export class AppComponent {
              itle = 'Angular File Download';

              constructor(private fileService: FileService) {}

              download() {
                this.fileService.downloadFile().subscribe(response => {
                        //let blob:any = new Blob([response.blob()], { type: 'text/json; charset=utf-8' });
                        //const url= window.URL.createObjectURL(blob);
                        //window.open(url);
                        window.location.href = response.url;
                        //fileSaver.saveAs(blob, 'employees.json');
                    }), error => console.log('Error downloading the file'),
                     () => console.info('File downloaded successfully');
              }
            }

这是我的 app.component.html:

                <div style="text-align:center">
              <h1>
                Welcome to {{ title }}
              </h1>
            </div>
            <h2>Click below link to get employee data</h2>
            <div>
                <h3>
                    Using Link <br/>
                    <a href="#" (click)="download()">Download Employee Data</a>
                </h3>

                <h3>Using Button</h3>
                <input type="button" (click)="download()" value="Download Employee Data"/>
            </div>


            <router-outlet></router-outlet>

Answer 1

我认为问题出在您的返回类型上。这不是

Observable<HttpResponse<Blob>>

它(如果我没记错的话)应该是

Observable<Blob>

它实际上告诉你:你不能分配:

Observable<Response>

您尝试将其分配给的对象。因为我们知道您正在寻找的响应是“Blob”(我认为它通过接口(interface)、子类型等与响应兼容)，Observable<Blob>看起来是对的。

发布此内容后，我查看了几个地方，看来内存确实对我有用......这次。

如果不是这样，您可以“任何”它:

Observable<any>

或者按照它告诉你的去做:

Observable<Response>

Debugger/console.log 它，看看你得到什么，然后相应地调整输入。