Thuộc tính 'bản đồ' không tồn tại trên loại 'Có thể quan sát <Phản hồi>'

Tôi đang cố gắng gọi API từ Angular nhưng đang gặp lỗi này:

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

Các câu trả lời từ câu hỏi tương tự này không giải quyết được vấn đề của tôi: Angular 2 beta.17: Thuộc tính 'bản đồ' không tồn tại trên loại 'Có thể quan sát <Phản hồi>' .

Tôi đang sử dụng Angular 2.0.0-beta.17.

Bạn cần nhập maptoán tử:

import 'rxjs/add/operator/map'

Hay nói chung hơn:

import 'rxjs/Rx';

Lưu ý: Đối với các phiên bản của RxJS 6.x.xtrở lên, bạn sẽ phải sử dụng các toán tử có thể điều chỉnh được như trong đoạn mã dưới đây:

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

Điều này là do nhóm RxJS loại bỏ hỗ trợ cho việc sử dụng Xem các thay đổi vi phạm trong thay đổi của RxJS để biết thêm thông tin.

Từ thay đổi:

Toán tử : Các toán tử có thể điều chỉnh được bây giờ phải được nhập từ rxjs như vậy : import { map, filter, switchMap } from 'rxjs/operators';. Không nhập khẩu sâu.

Xem lại điều này bởi vì giải pháp của tôi không được liệt kê ở đây.

Tôi đang chạy Angular 6 với rxjs 6.0 và gặp phải lỗi này.

Đây là những gì tôi đã làm để khắc phục nó:

tôi đã thay đổi

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

chỉ đơn giản là:

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

Tôi tìm thấy bản sửa lỗi ở đây:

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

chỉ cần viết lệnh này trong vs thiết bị đầu cuối mã của dự án của bạn và khởi động lại dự án.

npm install rxjs-compat

Bạn cần nhập maptoán tử bằng cách viết này:

import 'rxjs/add/operator/map';

Đối với 7v góc

Thay đổi

import 'rxjs/add/operator/map';

Đến

import { map } from "rxjs/operators"; 

Và

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

Tôi gặp vấn đề tương tự với Angular 2.0.1 vì tôi đang nhập Observable từ

import { Observable } from 'rxjs/Observable';

Thay vào đó, tôi giải quyết vấn đề của mình khi nhập Observable từ đường dẫn này

import { Observable } from 'rxjs';

Trong rxjs 6 cách sử dụng toán tử bản đồ đã được thay đổi, bạn cần sử dụng nó như thế này.

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

Để tham khảo https://www.academind.com/learn/javascript/rxjs-6-what-changed/#operators-update-path

chỉ cần cài đặt rxjs-compat bằng cách gõ vào terminal:

npm install --save rxjs-compat

sau đó nhập:

import 'rxjs/Rx';

Trong Angular 7. *. * Mới nhất , bạn có thể thử cách này đơn giản như:

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

Và sau đó bạn có thể sử dụng chúng methodsnhư sau:

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

Kiểm tra bản demo này để biết thêm chi tiết.

Trong trường hợp của tôi, nó chỉ đủ để bao gồm bản đồ và lời hứa:

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

Tôi đã giải quyết vấn đề này bằng cách nhập một số thành phần rxjs như tài liệu chính thức khuyến nghị:

1) Nhập câu lệnh trong một tệp ứng dụng / rxjs-oper.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) Nhập chính toán tử rxjs trong dịch vụ của bạn:

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

Trong hàm trên, bạn có thể thấy tôi đã không sử dụng res.json () vì tôi đang sử dụng HttpClient. Nó tự động áp dụng res.json () và trả về Có thể quan sát được (httpResponse <chuỗi>). Bạn không còn cần phải tự gọi hàm này sau góc 4 trong HttpClient.

Tôi gặp vấn đề tương tự, tôi đang sử dụng Visual studio 2015 có phiên bản cũ hơn của bản thảo.

Sau khi nâng cấp phần mở rộng, vấn đề đã được giải quyết.

Liên kết tải xuống

Tôi đang sử dụng Angular 5.2 và khi tôi sử dụng, import 'rxjs/Rx';nó sẽ gây ra lỗi lint sau: TSLint: Việc nhập này bị liệt vào danh sách đen, thay vào đó hãy nhập một mô hình con (danh sách đen)

Xem ảnh chụp màn hình bên dưới:

GIẢI PHÁP: Giải quyết nó bằng cách chỉ nhập các toán tử mà tôi cần . Ví dụ sau:

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

Vì vậy, sửa chữa sẽ chỉ nhập cụ thể các toán tử cần thiết.

Đơn giản chỉ cần cài đặt rxjs-compat để giải quyết vấn đề

npm i rxjs-compat --save-dev

Và nhập nó như dưới đây

import 'rxjs/Rx';

Trước hết chạy cài đặt như dưới đây:

npm install --save rxjs-compat@6

Bây giờ bạn cần nhập rxjsvào service.ts:

import 'rxjs/Rx'; 

Voila! Vấn đề đã được giải quyết.

Đơn giản chỉ cần chạy npm install --save rxjs-compatnó sửa lỗi.

Nó được đề nghị ở đây

Tôi đã thử tất cả các câu trả lời có thể được đăng ở trên không ai trong số họ làm việc,

Tôi đã giải quyết nó bằng cách khởi động lại IDE của mình, tức là Visual Studio Code

Có thể nó sẽ giúp ai đó.

Tôi cũng phải đối mặt với lỗi tương tự. Một giải pháp mà làm việc cho tôi là để thêm các dòng sau trong bạn service.ts nộp thay vì của import 'rxjs/add/operator/map':

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

Ví dụ: app.service.ts của tôi sau khi gỡ lỗi là như thế,

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

Nếu sau khi nhập nhập 'rxjs / add / toán tử / map' hoặc nhập 'rxjs / Rx' thì bạn cũng gặp lỗi tương tự, sau đó khởi động lại trình chỉnh sửa mã phòng thu trực quan của bạn, lỗi sẽ được giải quyết.

Đối với tất cả những người dùng linux đang gặp vấn đề này, hãy kiểm tra xem thư mục rxjs-compat có bị khóa hay không. Tôi đã có vấn đề chính xác như vậy và tôi đã đi vào terminal, sử dụng sudo su để cấp quyền cho toàn bộ thư mục rxjs-compat và nó đã được sửa. Đó là giả sử bạn nhập khẩu

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

trong tệp project.ts nơi xảy ra lỗi .map gốc.

Sử dụng mapchức năng trong pipechức năng và nó sẽ giải quyết vấn đề của bạn. Bạn có thể kiểm tra tài liệu ở đây .

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 cài đặt 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());
  }

 }

chạy lệnh

 npm install rxjs-compat 

Tôi chỉ nhập

 import 'rxjs/add/operator/map';

khởi động lại vs mã, vấn đề được giải quyết.

Phiên bản mới góc cạnh không hỗ trợ .map bạn phải cài đặt phiên bản này thông qua cài đặt cmd npm --save rxjs-compat thông qua điều này bạn có thể thưởng thức với kỹ thuật cũ. lưu ý: đừng quên nhập các dòng này.

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