Свойство 'map' не существует в типе 'Observable <Response>'

Ответ 1

Вам нужно импортировать оператора map:

import 'rxjs/add/operator/map'

Или в целом:

import 'rxjs/Rx';

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

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.

Из журнала изменений:

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

Ответ 2

Повторите это, потому что мое решение здесь не указано.

Я запускаю Angular 6 с rxjs 6.0 и сталкивался с этой ошибкой.

Вот что я сделал, чтобы исправить это:

Я изменился

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

просто быть:

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

Я нашел исправление здесь:

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

Надеюсь, это поможет.

Ответ 3

просто напишите эту команду в кодовом терминале вашего проекта и перезапустите проект.

npm install rxjs-compat

Вам нужно импортировать оператора map, написав:

import 'rxjs/add/operator/map';

Ответ 4

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

import { Observable } from 'rxjs/Observable';

Я разрешаю свою проблему при импорте Observable с этого пути вместо

import { Observable } from 'rxjs';

Ответ 5

Для угловых 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()));

Ответ 6

В 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

Ответ 7

просто установите rxjs-compat, набрав терминал:

npm install --save rxjs-compat

затем импортируйте:

import 'rxjs/Rx';

Ответ 8

В последней версии Angular 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);
      })
    );
  }

Проверьте это демо для более подробной информации.

Ответ 9

В моем случае этого было бы недостаточно, чтобы включить только карту и обещать:

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';

Ответ 10

У меня была такая же проблема, я использовал Visual Studio 2015 с более старой версией typescript.

После обновления расширения проблема была решена.

Ссылка для скачивания

Ответ 11

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

Смотрите скриншот ниже:

РЕШЕНИЕ: Решил его, импортировав только те операторы, которые мне нужны. Пример:

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

Таким образом, исправление будет заключаться в том, чтобы импортировать только необходимые операторы.

Ответ 12

Прежде всего запустите установку, как показано ниже:

npm install --save [email protected]

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

import 'rxjs/Rx'; 

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

Ответ 13

Я пробовал все возможные ответы, выше, ни один из них не работал,

Я разрешил его, просто перезапустив мою IDE, т.е. Visual Studio Code

Пусть это поможет кому-то.

Ответ 14

Я тоже столкнулся с такой же ошибкой. Одним из решений, которые работали для меня, было добавление следующих строк в ваш файл 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));
    }
}

Ответ 15

Если после импорта import 'rxjs/add/operator/map' или import 'rxjs/Rx' тоже вы получаете ту же ошибку, то перезапустите редактор визуальных студийных кодов, ошибка будет решена.

Ответ 16

Просто установите rxjs-compat для решения проблемы.

npm i rxjs-compat --save-dev

И импортируйте его, как показано ниже.

import 'rxjs/Rx';

Ответ 17

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() и возвращает Observable (HttpResponse & lt; string>). Вам больше не нужно вызывать эту функцию самостоятельно после angular 4 в HttpClient.

Ответ 18

для всех тех пользователей linux, которые имеют эту проблему, проверьте, заблокирована ли папка rxjs-compat. У меня была такая же проблема, и я пошел в терминал, использовал sudo su, чтобы дать разрешение на всю папку rxjs-compat, и она была исправлена. То предположение, что вы импортировали

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

в файле project.ts, где произошла ошибка.map.

Ответ 19

Используйте функцию 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;
  })
})

Ответ 20

npm install rxjs @6 rxjs-compat @6 --save

Ответ 21

  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, проблема будет решена.

Ответ 22

Новая версия на английском языке не поддерживает .map, вы должны установить это с помощью cmd npm install --save rxjs-compat, с помощью которого вы можете пользоваться старой техникой. примечание: не забудьте импортировать эти строки.

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