Свойство 'map' не существует для типа 'Observable ‹Blob›'

Я хочу реализовать загрузку файла с помощью этого кода Angular 6:

Остальное API:

@GetMapping("export")
    public ResponseEntity<InputStreamResource> export() throws IOException {
        ClassPathResource pdfFile = new ClassPathResource(EXTERNAL_FILE_PATH);

        HttpHeaders headers = new HttpHeaders();
        headers.add("Cache-Control", "no-cache, no-store, must-revalidate");
        headers.add("Pragma", "no-cache");
        headers.add("Expires", "0");

        return ResponseEntity.ok().headers(headers).contentLength(pdfFile.contentLength())
                .contentType(MediaType.parseMediaType("application/pdf"))
                .body(new InputStreamResource(pdfFile.getInputStream()));
    }

Услуга:

import {Injectable} from '@angular/core';
import {HttpClient, HttpParams} from "@angular/common/http";
import {Observable} from "rxjs/index";
import {environment} from "../../../environments/environment";
import {HttpUtils} from "../common/http-utils";
import { map } from 'rxjs/operators';

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

  constructor(private http: HttpClient) {
  }

  downloadPDF(): any {
    return this.http.get(environment.api.urls.downloads.getPdf, { responseType: 'blob' }).map(
    (res) => {
        return new Blob([res.blob()], { type: 'application/pdf' });
    });
  }  
}

Составная часть:

import {Component, OnInit} from '@angular/core';
import {DownloadService} from "../service/download.service";
import {ActivatedRoute, Router} from "@angular/router";
import {flatMap} from "rxjs/internal/operators";
import {of} from "rxjs/index";
import { map } from 'rxjs/operators';

@Component({
  selector: 'app-download',
  templateUrl: './download.component.html',
  styleUrls: ['./download.component.scss']
})
export class DownloadComponent implements OnInit {

  constructor(private downloadService: DownloadService,
              private router: Router,
              private route: ActivatedRoute) {
  }

  ngOnInit() {   
  }

  export() {               
    this.downloadService.downloadPDF().subscribe(res => {
      const fileURL = URL.createObjectURL(res);
      window.open(fileURL, '_blank');
    });         
  } 
}

Когда я запускаю angular, я получаю сообщение об ошибке: ОШИБКА в src / app / panel / service / download.service.ts (17,91): error TS2339: Свойство «карта» не существует для типа «Observable».

Как правильно импортировать map в код? Когда я нажимаю кнопку загрузки, ничего не происходит.


person Peter Penzov    schedule 10.11.2018    source источник


Ответы (2)


Вероятно, вы используете Rxjs 5.5 или новее.

Вы больше не можете связывать такие операторы, как map, непосредственно с наблюдаемым значением после Rxjs 5.5. Вам нужно будет использовать .pipe, а затем вместо этого передать список операторов, разделенных запятыми.

import { map } from 'rxjs/operators';
...
downloadPDF(): any {
  return this.http.get(environment.api.urls.downloads.getPdf, {
    responseType: 'blob',
    observe: 'response'
  })
  .pipe(
    map((res: any) => {
      return new Blob([res.blob()], { type: 'application/pdf' });
    })
  );
}

Вот Образец StackBlitz < / strong> для вашего исх.

Кстати, Explorer - отличный инструмент для проверки того, как изменился синтаксис Rxjs. так далеко.

person SiddAjmera    schedule 10.11.2018
comment
Спасибо. Теперь я получаю ERROR in src/app/panel/service/download.service.ts(21,30): error TS2339: Property 'blob' does not exist on type 'Blob'. - person Peter Penzov; 10.11.2018
comment
@PeterPenzov, укажите его тип как any. И это должно исправить. - person SiddAjmera; 10.11.2018

Вы можете вызвать запрос примерно так, потому что вы используете angular 6

downloadPDF(): any {
    return this.http.get(environment.api.urls.downloads.getPdf, { responseType: 'blob' });
  }  

ОБНОВЛЕНИЕ: импорт ResponseContentType

импортировать {Http, ResponseContentType} из '@ angular / http';

person Abhishek Ekaanth    schedule 10.11.2018
comment
Я получаю ERROR in src/app/panel/service/download.service.ts(19,81): error TS2304: Cannot find name 'ResponseContentType'. - person Peter Penzov; 10.11.2018
comment
Я получаю ОШИБКУ в src / app / panel / service / download.service.ts (21,65): error TS2345: Argument of type '{responseType: ResponseContentType; } 'не может быть назначен параметру типа' {headers ?: HttpHeaders | {[заголовок: строка]: строка | нить[]; }; наблюдать ?: тело; params ?: Ht ... '. Типы свойства responseType несовместимы. Тип ResponseContentType нельзя присвоить типу json. - person Peter Penzov; 10.11.2018
comment
пожалуйста, проверьте сейчас - person Abhishek Ekaanth; 10.11.2018