ไม่มี 'แผนที่' ของอสังหาริมทรัพย์ในประเภท 'Observable <Response>'

ฉันพยายามเรียก API จาก Angular แต่ได้รับข้อผิดพลาดนี้:

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

คำตอบจากคำถามที่คล้ายกันนี้ไม่ได้แก้ปัญหาของฉัน: เชิงมุม 2 beta.17: ที่ดิน 'แผนที่' ไม่ได้อยู่กับชนิด 'สังเกต <Response>'

ฉันใช้ Angular 2.0.0-beta.17

คุณต้องนำเข้าmapโอเปอเรเตอร์:

import 'rxjs/add/operator/map'

หรือมากกว่าโดยทั่วไป:

import 'rxjs/Rx';

ประกาศ: สำหรับรุ่นของ RxJS 6.x.xขึ้นไปคุณจะต้องใช้โอเปอเรเตอร์ที่สามารถใช้งานได้ดังที่แสดงในข้อมูลโค้ดด้านล่าง:

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 สำหรับข้อมูลเพิ่มเติม

จากการเปลี่ยนแปลง:

ผู้ประกอบการ : ผู้ประกอบการ Pipeable ขณะนี้ต้องนำเข้าจาก rxjs 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

เพียงแค่เขียนคำสั่งนี้ใน vs code terminal ของโครงการของคุณและเริ่มโครงการใหม่

npm install rxjs-compat

คุณต้องนำเข้าmapโอเปอเรเตอร์โดยเขียนสิ่งนี้:

import 'rxjs/add/operator/map';

สำหรับ 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()));

ฉันมีปัญหาเดียวกันกับ Angular 2.0.1 เพราะฉันนำเข้า Observable จาก

import { Observable } from 'rxjs/Observable';

ฉันแก้ไขปัญหาการนำเข้า Observable จากเส้นทางนี้แทน

import { Observable } from 'rxjs';

ในการใช้งานตัวดำเนินการแผนที่ 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 โดยการพิมพ์ใน terminal:

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-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) นำเข้า rxjs-operator ในบริการของคุณ:

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

ในฟังก์ชั่นด้านบนคุณจะเห็นว่าฉันไม่ได้ใช้ res.json () ตั้งแต่ฉันใช้ HttpClient มันใช้ res.json () โดยอัตโนมัติและส่งกลับ Observable (HttpResponse <string>) คุณไม่จำเป็นต้องเรียกใช้ฟังก์ชันนี้อีกต่อไปหลังจากทำมุม 4 ใน HttpClient แล้ว

ฉันมีปัญหาเดียวกันฉันใช้ Visual Studio 2015 ซึ่งมี typescript เวอร์ชันเก่ากว่า

หลังจากอัปเกรดส่วนขยายปัญหาได้รับการแก้ไข

ลิ้งค์ดาวน์โหลด

ฉันกำลังใช้ Angular 5.2 และเมื่อฉันใช้import 'rxjs/Rx';จะทำให้ฉันมีข้อผิดพลาดต่อไปนี้: TSLint: การนำเข้านี้อยู่ในรายการที่ไม่อนุญาตให้นำเข้า submodule แทน (import-blacklist)

ดูภาพหน้าจอด้านล่าง:

การแก้ไข: แก้ไขได้ด้วยการนำเข้าตัวดำเนินการที่ฉันต้องการเท่านั้น ตัวอย่างดังต่อไปนี้:

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

ดังนั้นการแก้ไขจะนำเข้าเฉพาะตัวดำเนินการที่จำเป็นเท่านั้น

เพียงติดตั้งrxjs-compatเพื่อแก้ปัญหา

npm i rxjs-compat --save-dev

และนำเข้ามันเหมือนด้านล่าง

import 'rxjs/Rx';

ครั้งแรกของการติดตั้งทำงานทั้งหมดดังนี้:

npm install --save rxjs-compat@6

ตอนนี้คุณต้องนำเข้าrxjsในservice.ts:

import 'rxjs/Rx'; 

Voila! ปัญหาได้รับการแก้ไขแล้ว

เพียงแค่เรียกใช้npm install --save rxjs-compatมันแก้ไขข้อผิดพลาด

ขอแนะนำที่นี่

ฉันลองคำตอบที่เป็นไปได้ทั้งหมดที่โพสต์ไว้ด้านบนไม่ได้

ฉันแก้ไขได้โดยเพียงแค่เริ่มต้น 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));
    }
}

หากหลังจากการนำเข้าการนำเข้า 'rxjs / เพิ่ม / ผู้ประกอบการ / แผนที่' หรือนำเข้า 'rxjs / Rx' ด้วยคุณจะได้รับข้อผิดพลาดเดียวกันจากนั้นเริ่มการแก้ไขรหัสสตูดิโอภาพของคุณข้อผิดพลาดจะได้รับการแก้ไข

สำหรับผู้ใช้ 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 ติดตั้ง rxjs @ 6 rxjs-compat @ 6 - บันทึก

  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 - บันทึก rxjs-compat ผ่านทางนี้คุณสามารถเพลิดเพลินกับเทคนิคเก่า หมายเหตุ: อย่าลืมนำเข้าบรรทัดเหล่านี้

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