Свойство ‘map’ не существует в типе ‘Observable ‘

Я пытаюсь вызвать API из Angular, но получаю эту ошибку:

Property 'map' does not exist on type 'Observable'

Ответы на этот похожий вопрос не решили мою проблему: Angular 2 beta.17: Property ‘map’ не существует в типе «Observable » .

Я использую Angular 2.0.0-beta.17.

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

 import 'rxjs/add/operator/map' 

Или в целом:

 import 'rxjs/Rx'; 

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

 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'; , Нет глубокого импорта.

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

Я запускаю 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

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

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

 import { Observable } from 'rxjs/Observable'; 

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

 import { Observable } from 'rxjs'; 

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

 npm install rxjs-compat 

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

 import 'rxjs/add/operator/map'; 

В 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

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

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

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

Смотрите скриншот ниже: Импорт rxjs / Rx занесен в черный список в формате Angular 5.2

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

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

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

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

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

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

Я тоже столкнулся с такой же ошибкой. Одним из решений, которые работали для меня, было добавление следующих строк в ваш файл 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 { return this.http.get('https://samples.openweathermap.org/data/2.5/history/city?q=Warren,OH&appid=b6907d289e10d714a6e88b30761fae22') .pipe(map(result => result)); } } 

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

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

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

для всех тех пользователей 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; }) }) 

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

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

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

 npm i rxjs-compat --save-dev 

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

 import 'rxjs/Rx'; 
  • Как скрыть элемент при прокрутке страницы?
  • Угловой 2: Как стиль элемента хоста компонента?
  • Угловой 2: Как использовать / импортировать http-модуль?
  • Что такое ngDefaultControl в Angular?
  • Рабочий пример углового материала 2.0 MdDialog с угловым 2,0
  • Динамическое обновление css в Angular 2
  • Импорт lodash в приложение углового2 +
  • Когда использовать интерфейс и модель в TypeScript / Angular2
  • Установите базовый url для угловых 2 запросов HTTP
  • Угловая 4: Как включить Bootstrap?
  • Угловой 2 http.post () не отправляет запрос
  • Interesting Posts

    AngularJS: Предотrotation ошибки $ digest уже выполняется при вызове $ scope. $ Apply ()

    Итерировать через хеши в жидких шаблонах

    Практическое использование битовых полей с нулевой длиной

    USB-накопитель внезапно стал доступен только для чтения

    Простая командная строка для загрузки удаленного артефакта maven2 в локальный repository?

    Могу ли я добавить параметры правой кнопки мыши в Google Chrome?

    Ошибка углового ng-repeat «Дубликаты в ретрансляторе не допускаются».

    Последняя версия jQuery на CDN от Google

    Почему емкости RAM-модуля имеют мощность в два (512 MiB, 1, 2, 4, 8 GiB)?

    Сделать папку доступа в первый раз быстрее

    Работает ли компьютер с футляром, открытым беспорядком с воздушным потоком / охлаждением?

    Как читать большой XML-файл, не загружая его в память и используя XElement

    Angular2: проверка для не будет срабатывать при изменении файла для загрузки

    В запрошенном ресурсе нет заголовка «Access-Control-Allow-Origin» – при попытке получить данные из REST API

    Вырезать / выбить одну форму из другой формы

    Давайте будем гением компьютера.