J'essaie d'appeler une API depuis Angular, mais j'obtiens cette erreur:
Property 'map' does not exist on type 'Observable<Response>'
Les réponses à cette question similaire n'ont pas résolu mon problème: Angular 2 beta.17: la propriété 'map' n'existe pas sur le type 'Observable <Response>' .
J'utilise Angular 2.0.0-beta.17.
Vous devez importer l'opérateur map
:
import 'rxjs/add/operator/map'
Ou plus généralement:
import 'rxjs/Rx';
Remarque: pour les versions de RxJS 6.x.x
et des versions ultérieures, vous devrez utiliser des opérateurs pouvant être canalisés, comme indiqué dans l'extrait de code ci-dessous:
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);
});
}
}
Ceci est dû au fait que l’équipe RxJS a supprimé la prise en charge de l’utilisation de Voir le les modifications de rupture dans le journal des modifications de RxJS pour plus d’informations.
Du changelog:
operators: les opérateurs pipeables doivent maintenant être importés de rxjs comme suit:
import { map, filter, switchMap } from 'rxjs/operators';
. Pas d'importations profondes.
Revisiter cela parce que ma solution n'est pas répertoriée ici.
J'exécute Angular 6 avec rxjs 6.0 et ai rencontré cette erreur.
Voici ce que j'ai fait pour le réparer:
J'ai changé
map((response: any) => response.json())
être simplement:
.pipe(map((response: any) => response.json()));
J'ai trouvé le correctif ici:
https://github.com/angular/angular/issues/15548#issuecomment-387009186
J'espère que cela pourra aider.
écrivez simplement cette commande dans le code vs terminal de votre projet et redémarrez-le.
npm install rxjs-compat
Vous devez importer l'opérateur map
en écrivant ceci:
import 'rxjs/add/operator/map';
J'ai eu le même problème avec Angular 2.0.1 parce que j'importais Observable de
import { Observable } from 'rxjs/Observable';
Je résous mon problème en important Observable depuis ce chemin
import { Observable } from 'rxjs';
Dans rxjs 6, l’utilisation de l’opérateur cartographique a été modifiée Maintenant, vous devez l’utiliser comme ceci.
import { map } from 'rxjs/operators';
myObservable
.pipe(map(data => data * 2))
.subscribe(...);
Pour référence https://www.academind.com/learn/javascript/rxjs-6- what- changé
Dans mon cas, il ne suffirait pas d'inclure uniquement la carte et la promesse:
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/toPromise';
J'ai résolu ce problème en important plusieurs composants de rxjs en tant que documentation officielle recommande:
1) Importez des instructions dans un fichier app/rxjs-operators.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) Importez l'opérateur rxjs lui-même dans votre service:
// Add the RxJS Observable operators we need in this app.
import './rxjs-operators';
installez simplement rxjs-compat en tapant dans le terminal:
npm install --save rxjs-compat
puis importer:
import 'rxjs/Rx';
J'avais le même problème, j'utilisais Visual Studio 2015 qui avait une version plus ancienne de TypeScript.
Après la mise à niveau de l'extension, le problème a été résolu.
Pour le 7v angulaire
change import 'rxjs/add/operator/map'; to import { map } from "rxjs/operators";
et
return this.http.get('http://localhost/ionicapis/public/api/products')
.pipe(map(res => res.json()));
Dans le dernier Angular 7. *. *, Vous pouvez l’essayer simplement comme:
import { Observable, of } from "rxjs";
import { map, catchError } from "rxjs/operators";
Et ensuite, vous pouvez utiliser ces methods
comme suit:
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);
})
);
}
Cochez cette démo pour plus de détails.
Tout d’abord, lancez l’installation comme ci-dessous:
npm install --save rxjs-compat@6
Maintenant, vous devez importer rxjs
dans service.ts
:
import 'rxjs/Rx';
Voila! Le problème a été résolu.
Si, après l'importation, importez 'rxjs/add/operator/map' ou importez 'rxjs/Rx', vous obtenez le même message d'erreur, redémarrez votre éditeur de code Visual Studio, ce dernier sera résolu.
Installez simplement rxjs-compat pour résoudre le problème
npm i rxjs-compat --save-dev
Et l'importer comme ci-dessous
import 'rxjs/Rx';
J'ai essayé toutes les réponses possibles affichées ci-dessus, aucune d'entre elles n'a fonctionné,
Je l'ai résolu en redémarrant simplement mon IDE, c'est-à-dire le code Visual Studio.
Peut aider quelqu'un.
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));
}
Dans la fonction ci-dessus, vous pouvez voir que je n’ai pas utilisé res.json (), car j’ai utilisé HttpClient. Il applique res.json () automatiquement et renvoie Observable (HttpResponse <string>). Vous n'avez plus besoin d'appeler cette fonction vous-même après angular 4 dans HttpClient.
Utilisez la fonction map
dans la fonction pipe
et cela résoudra votre problème. Vous pouvez consulter la documentation ici .
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 installer rxjs @ 6 rxjs-compat @ 6 --save
Moi aussi j'ai fait face à la même erreur. Une solution qui a fonctionné pour moi a été d’ajouter les lignes suivantes dans votre service.ts fichier à la place de import 'rxjs/add/operator/map'
:
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';
Par exemple, mon app.service.ts après le débogage était comme,
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));
}
}
pour tous les utilisateurs de Linux ayant ce problème, vérifiez si le dossier rxjs-compat est verrouillé. J'ai eu exactement ce même problème et je suis allé dans le terminal, j'ai utilisé Sudo su pour donner la permission à tout le dossier rxjs-compat et ça a été corrigé. C'est en supposant que vous avez importé
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/catch';
dans le fichier project.ts où l'erreur .map d'origine s'est produite.
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());
}
}
lancer la commande
npm install rxjs-compat
Je viens d'importer
import 'rxjs/add/operator/map';
redémarrez le code vs, le problème est résolu.