Properti 'peta' tidak ada pada tipe 'Observable <Response>'

Saya mencoba memanggil API dari Angular tetapi saya mendapatkan kesalahan ini:

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

Jawaban dari pertanyaan serupa ini tidak menyelesaikan masalah saya: Angular 2 beta.17: Properti 'peta' tidak ada pada tipe 'Observable <Response>' .

Saya menggunakan Angular 2.0.0-beta.17.

Anda perlu mengimpor mapoperator:

import 'rxjs/add/operator/map'

Atau lebih umum:

import 'rxjs/Rx';

Perhatian: Untuk versi RxJS 6.x.xdan di atasnya, Anda harus menggunakan operator yang dapat pipa seperti yang ditunjukkan dalam cuplikan kode di bawah ini:

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);
    });
  }
}

Ini disebabkan oleh tim RxJS menghapus dukungan untuk menggunakan Lihat perubahan pada changelog RxJS untuk info lebih lanjut.

Dari changelog:

operator : operator Pipeable sekarang harus diimpor dari rxjs suka begitu: import { map, filter, switchMap } from 'rxjs/operators';. Tidak ada impor dalam.

Mengunjungi kembali ini karena solusi saya tidak tercantum di sini.

Saya menjalankan Angular 6 dengan rxjs 6.0 dan mengalami kesalahan ini.

Inilah yang saya lakukan untuk memperbaikinya:

aku berubah

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

secara sederhana:

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

Saya menemukan perbaikannya di sini:

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

cukup tulis perintah ini di terminal kode vs proyek Anda dan restart proyek.

npm install rxjs-compat

Anda perlu mengimpor mapoperator dengan menulis ini:

import 'rxjs/add/operator/map';

Untuk 7v Sudut

Perubahan

import 'rxjs/add/operator/map';

Untuk

import { map } from "rxjs/operators"; 

Dan

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

Saya memiliki masalah yang sama dengan Angular 2.0.1 karena saya mengimpor dari diamati

import { Observable } from 'rxjs/Observable';

Saya menyelesaikan masalah saya dalam mengimpor Observable dari jalur ini sebagai gantinya

import { Observable } from 'rxjs';

Dalam rxjs 6 penggunaan peta operator telah diubah sekarang Anda harus menggunakannya seperti ini.

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

Untuk referensi https://www.academind.com/learn/javascript/rxjs-6-what-changed/#operators-update-path

cukup instal rxjs-compat dengan mengetikkan terminal:

npm install --save rxjs-compat

lalu impor:

import 'rxjs/Rx';

Di Angular 7 terbaru . *. * , Anda dapat mencoba ini hanya sebagai:

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

Dan kemudian Anda dapat menggunakan ini methodssebagai berikut:

   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);
      })
    );
  }

Lihat demo ini untuk lebih jelasnya.

Dalam kasus saya, tidak cukup hanya menyertakan peta dan janji:

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

Saya memecahkan masalah ini dengan mengimpor beberapa komponen rxjs sebagaimana direkomendasikan oleh dokumentasi resmi :

1) Impor pernyataan dalam satu file 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) Impor rxjs-operator itu sendiri dalam layanan Anda:

// 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));
}

Dalam fungsi di atas Anda dapat melihat saya tidak menggunakan res.json () karena saya menggunakan HttpClient. Ini berlaku res.json () secara otomatis dan mengembalikan Observable (HttpResponse <string>). Anda tidak perlu lagi memanggil fungsi ini sendiri setelah sudut 4 di HttpClient.

Saya memiliki masalah yang sama, saya menggunakan Visual studio 2015 yang memiliki versi naskah yang lebih lama.

Setelah memutakhirkan ekstensi masalah ini terselesaikan.

Unduh Tautan

Saya menggunakan Angular 5.2 dan ketika saya menggunakannya import 'rxjs/Rx';melempar kesalahan lint berikut: TSLint: Impor ini masuk daftar hitam, impor submodule sebagai gantinya (impor-daftar hitam)

Lihat tangkapan layar di bawah ini:

SOLUSI: Memecahkannya dengan mengimpor hanya operator yang saya butuhkan . Contoh berikut:

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

Jadi perbaikannya adalah mengimpor hanya operator yang diperlukan saja.

Cukup instal rxjs-compat untuk menyelesaikan masalah

npm i rxjs-compat --save-dev

Dan impor seperti di bawah ini

import 'rxjs/Rx';

Pertama-tama jalankan instalasi seperti di bawah ini:

npm install --save rxjs-compat@6

Sekarang Anda perlu mengimpor rxjsdi service.ts:

import 'rxjs/Rx'; 

Voila! masalah telah diperbaiki.

cukup jalankan npm install --save rxjs-compatitu memperbaiki kesalahan.

Disarankan di sini

Saya mencoba semua jawaban yang mungkin diposting di atas tidak ada yang berhasil,

Saya mengatasinya dengan hanya me-restart IDE saya yaitu, Visual Studio Code

Semoga ini membantu seseorang.

Saya juga menghadapi kesalahan yang sama. Salah satu solusi yang berhasil bagi saya adalah menambahkan baris berikut di file service.ts Anda alih - alihimport 'rxjs/add/operator/map' :

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

Sebagai contoh, app.service.ts saya setelah debugging seperti,

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));
    }
}

Jika setelah mengimpor impor 'rxjs / add / operator / map' atau impor 'rxjs / Rx' juga Anda mendapatkan kesalahan yang sama kemudian mulai ulang editor kode studio visual Anda, kesalahan akan diselesaikan.

untuk semua pengguna linux yang mengalami masalah ini, periksa apakah folder rxjs-compat terkunci. Saya punya masalah yang sama persis dan saya masuk terminal, menggunakan sudo su untuk memberikan izin ke seluruh folder rxjs-compat dan sudah diperbaiki. Itu dengan asumsi Anda mengimpor

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

dalam file project.ts di mana kesalahan .map asli terjadi.

Gunakan mapfungsi dalam pipefungsi dan itu akan menyelesaikan masalah Anda. Anda dapat memeriksa dokumentasinya di sini .

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 instal 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());
  }

 }

jalankan perintah

 npm install rxjs-compat 

Saya hanya mengimpor

 import 'rxjs/add/operator/map';

restart kode vs, masalah terpecahkan.

Versi baru angular tidak mendukung .map Anda harus menginstal ini melalui install cmd npm - save rxjs-compat melalui ini yang dapat Anda nikmati dengan teknik lama. Catatan: jangan lupa untuk mengimpor baris ini.

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