Question

任何帮助或提示将不胜感激！！我正在使用Angular 8，并尝试为blob文件创建可下载的链接。在Visual Studio代码中，file.service.ts中出现以下错误：类型“可观察”不能分配给类型“可观察>”。类型'Response'缺少类型'HttpResponse'的以下属性：正文，克隆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”（我想它与通过接口，子类型等的Response兼容），因此Observable<Blob>似乎是正确的。

发布此信息后，我在几个地方看过，似乎记忆确实为我服务了……这次。

如果不是，您可以“任意”使用它：

Observable<any>

或者跟它告诉你的一样：

Observable<Response>

Debugger / console.log它，查看所获得的内容，然后相应地调整键入。

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

1 个答案: