Властивість "map" не існує для типу "Спостережуваний <Response>"

Я намагаюся викликати API від Angular, але отримую цю помилку:

Property 'map' does not exist on type 'Observable<Response>'

Відповіді на подібне запитання не вирішили мою проблему: Angular 2 beta.17: Властивість 'map' не існує у типі 'Observable <Response>' .

Я використовую Angular 2.0.0-beta.17.

Вам потрібно імпортувати mapоператора:

import 'rxjs/add/operator/map'

Або загалом:

import 'rxjs/Rx';

Примітка. Для версій RxJS 6.x.xі новіших версій вам доведеться використовувати оператори, що передаються на трубу, як показано в фрагменті коду нижче:

import { map } from 'rxjs/operators';
import { HttpClient } from '@angular/common/http';

// ...
export class MyComponent {
  constructor(private http: HttpClient) { }
  getItems() {
    this.http.get('https://example.com/api/items').pipe(map(data => {})).subscribe(result => {
      console.log(result);
    });
  }
}

Це спричинено тим, що команда RxJS видаляє підтримку для використання. Щоб отримати додаткову інформацію, перегляньте зміни, що відбуваються в журналі змін RxJS.

З журналу змін:

Оператори : Pipeable оператори тепер повинні бути імпортовані з rxjs подобається так: import { map, filter, switchMap } from 'rxjs/operators';. Ніякого глибокого імпорту.

Перегляньте це, оскільки тут не вказано моє рішення.

Я запускаю Angular 6 з rxjs 6.0 і зіткнувся з цією помилкою.

Ось що я зробив, щоб виправити це:

я змінив

map((response: any) => response.json())

просто бути:

.pipe(map((response: any) => response.json()));

Тут я знайшов виправлення:

https://github.com/angular/angular/isissue/15548#issuecomment-387009186

просто напишіть цю команду в термінал проти коду вашого проекту та перезапустіть проект.

npm install rxjs-compat

Вам потрібно імпортувати mapоператора, написавши це:

import 'rxjs/add/operator/map';

Для кутових 7v

Зміна

import 'rxjs/add/operator/map';

До

import { map } from "rxjs/operators"; 

І

 return this.http.get('http://localhost/ionicapis/public/api/products')
 .pipe(map(res => res.json()));

У мене була така ж проблема з Angular 2.0.1, оскільки я імпортував Observable з

import { Observable } from 'rxjs/Observable';

Я вирішую свою проблему з імпортом спостерігаючого з цього шляху

import { Observable } from 'rxjs';

У rxjs 6 використання оператора карт було змінено, тепер вам потрібно використовувати його так.

import { map } from 'rxjs/operators';
myObservable
  .pipe(map(data => data * 2))
  .subscribe(...);

Для довідки https://www.academind.com/learn/javascript/rxjs-6-what-changed/#operators-update-path

просто встановіть rxjs-compat, ввівши термінал:

npm install --save rxjs-compat

потім імпортуйте:

import 'rxjs/Rx';

В останній кутовий 7. *. * Ви можете спробувати це просто:

import { Observable, of } from "rxjs";
import { map, catchError } from "rxjs/operators";

І тоді ви можете скористатись methodsтакими:

   private getHtml(): Observable<any> {
    return this.http.get("../../assets/test-data/preview.html").pipe(
      map((res: any) => res.json()),
      catchError(<T>(error: any, result?: T) => {
        console.log(error);
        return of(result as T);
      })
    );
  }

Перевірте цю демонстрацію для отримання більш детальної інформації.

У моєму випадку було б недостатньо включити лише карту та обіцянку:

import 'rxjs/add/operator/map';
import 'rxjs/add/operator/toPromise';

Я вирішив цю проблему, імпортуючи кілька компонентів rxjs, оскільки офіційна документація рекомендує:

1) Імпорт заяв в одному файлі app / rxjs-operator.ts:

// import 'rxjs/Rx'; // adds ALL RxJS statics & operators to Observable

// See node_module/rxjs/Rxjs.js
// Import just the rxjs statics and operators we need for THIS app.

// Statics
import 'rxjs/add/observable/throw';

// Operators
import 'rxjs/add/operator/catch';
import 'rxjs/add/operator/debounceTime';
import 'rxjs/add/operator/distinctUntilChanged';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/switchMap';
import 'rxjs/add/operator/toPromise';

2) Імпортуйте сам rxjs-оператор у вашу послугу:

// Add the RxJS Observable operators we need in this app.
import './rxjs-operators';

import { map } from "rxjs/operators";

getGetFunction(){
this.http.get('http://someapi')
.pipe(map(res => res));
}

getPostFunction(yourPara){
this.http.get('http://someapi',yourPara)
.pipe(map(res => res));
}

У наведеній вище функції ви бачите, що я не використовував res.json (), оскільки я використовував HttpClient. Він застосовує res.json () автоматично та повертає спостережуване (HttpResponse <string>). Вам більше не потрібно називати цю функцію самостійно після кутового 4 у HttpClient.

У мене був той самий випуск, я використовував Visual studio 2015, який мав старішу версію машинопису.

Після оновлення розширення проблему було вирішено.

Посилання для завантаження

Я використовую Angular 5.2 і коли я import 'rxjs/Rx';його використовую, видає мені таку помилку вказівки: TSLint: Цей імпорт перебуває у чорному списку, замість цього імпортуйте підмодуль (import-blacklist)

Дивіться скріншот нижче:

РІШЕННЯ: Вирішили це, імпортуючи лише ті оператори, які мені потрібні . Приклад наступний:

import 'rxjs/add/operator/map';
import 'rxjs/add/operator/catch';

Тож виправленням було б імпортувати конкретно лише необхідних операторів.

Для вирішення проблеми просто встановіть rxjs-compat

npm i rxjs-compat --save-dev

І імпортуйте як нижче

import 'rxjs/Rx';

Перш за все запустіть інсталяцію, як показано нижче:

npm install --save rxjs-compat@6

Тепер вам потрібно імпортувати rxjsв service.ts:

import 'rxjs/Rx'; 

Вуаля! Проблема була виправлена.

просто запустіть npm install --save rxjs-compatце виправляє помилку.

Тут рекомендується

Я спробував усі можливі відповіді, розміщені вище, жодна з них не працювала,

Я вирішив це, просто перезавантаживши свій IDE, тобто Visual Studio Code

Нехай це комусь допоможе.

Я теж зіткнувся з тією ж помилкою. Одне рішення , яке працювало для мене було додати наступні рядки в service.ts файл замість з import 'rxjs/add/operator/map':

import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';

Наприклад, мій app.service.ts після налагодження виглядав так,

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';

@Injectable()
export class AppService {
    constructor(private http: HttpClient) {}
    getData(): Observable<any> {
        return this.http.get('https://samples.openweathermap.org/data/2.5/history/city?q=Warren,OH&appid=b6907d289e10d714a6e88b30761fae22')
        .pipe(map(result => result));
    }
}

Якщо після імпорту імпорту 'rxjs / add / operator / map' або імпорту 'rxjs / Rx' ви також отримуєте ту ж помилку, то перезавантажте редактор коду візуальної студії, помилка буде усунена.

для всіх тих користувачів Linux, які мають цю проблему, перевірте, чи папка rxjs-compat заблокована. У мене була така ж проблема, і я зайшов у термінал, використовував sudo su, щоб дати дозвіл на всю папку rxjs-compat, і це було виправлено. Це припускаючи, що ви імпортували

import 'rxjs/add/operator/map';
import 'rxjs/add/operator/catch'; 

у файлі project.ts, де сталася початкова помилка .map.

Використовуйте mapфункцію у pipeфункції, і вона вирішить вашу проблему. Ви можете перевірити документацію тут .

this.items = this.afs.collection('blalal').snapshotChanges().pipe(map(changes => {
  return changes.map(a => {
    const data = a.payload.doc.data() as Items;
    data.id = a.payload.doc.id;
    return data;
  })
})

npm встановити rxjs @ 6 rxjs-compat @ 6 --save

  import { Injectable } from '@angular/core';
  import { Http } from '@angular/http';
  import 'rxjs/add/operator/map';

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

  constructor(public http: Http) { }

 //access apis Get Request 
 getUsers() {
 return this.http.get('http://jsonplaceholder.typicode.com/users')
  .map(res => res.json());
  }

 }

запустити команду

 npm install rxjs-compat 

Я просто імпортую

 import 'rxjs/add/operator/map';

перезапустити vs код, проблему вирішено.

Нова кутова версія не підтримує .map вам потрібно встановити це через cmd npm install --save rxjs-compat, завдяки якому ви можете насолоджуватися старою технікою. Примітка: не забудьте імпортувати ці рядки.

import { Observable, Subject } from 'rxjs';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/catch';