Я пытаюсь вызвать API из Angular, но получаю эту ошибку:
Property 'map' does not exist on type 'Observable<Response>'
Ответы на этот похожий вопрос не решили мою проблему: Angular 2 beta.17: Property 'map' не существует в типе "Observable <Response>".
Я использую Angular 2.0.0-beta.17.
Вам нужно импортировать оператора 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';, Нет глубокого импорта.
Повторите это, потому что мое решение здесь не указано.
Я запускаю 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
Надеюсь, это поможет.
просто напишите эту команду в кодовом терминале вашего проекта и перезапустите проект.
npm install rxjs-compat
Вам нужно импортировать оператора map, написав:
import 'rxjs/add/operator/map';
У меня была такая же проблема с Angular 2.0.1, потому что я импортировал Observable из
import { Observable } from 'rxjs/Observable';
Я разрешаю свою проблему при импорте Observable с этого пути вместо
import { Observable } from 'rxjs';
Для угловых 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()));
В 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';
В последней версии 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);
})
);
}
Проверьте это демо для более подробной информации.
В моем случае этого было бы недостаточно, чтобы включить только карту и обещать:
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';
У меня была такая же проблема, я использовал Visual Studio 2015 с более старой версией typescript.
После обновления расширения проблема была решена.
Я использую Angular 5.2 и когда я использую import 'rxjs/Rx'; он бросает мне следующую ошибку lint: TSLint: этот импорт занесен в черный список, вместо этого импортирует подмодуль (import-blacklist)
Смотрите скриншот ниже: 
РЕШЕНИЕ: Решил его, импортировав только те операторы, которые мне нужны. Пример:
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/catch';
Таким образом, исправление будет заключаться в том, чтобы импортировать только необходимые операторы.
Прежде всего запустите установку, как показано ниже:
npm install --save [email protected]
Теперь вам нужно импортировать rxjs в service.ts:
import 'rxjs/Rx';
Вуаля! Проблема была исправлена.
Я пробовал все возможные ответы, выше, ни один из них не работал,
Я разрешил его, просто перезапустив мою 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));
}
}
Если после импорта import 'rxjs/add/operator/map' или import 'rxjs/Rx' тоже вы получаете ту же ошибку, то перезапустите редактор визуальных студийных кодов, ошибка будет решена.
Просто установите rxjs-compat для решения проблемы.
npm i rxjs-compat --save-dev
И импортируйте его, как показано ниже.
import 'rxjs/Rx';
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.
для всех тех пользователей 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 install 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';