'Map' özelliği 'Observable <Response>' türünde mevcut değil


Yanıtlar:


374

mapOperatörü içe aktarmanız gerekir :

import 'rxjs/add/operator/map'

Veya daha genel olarak:

import 'rxjs/Rx';

Uyarı: RxJS 6.x.xve üzeri sürümler için, aşağıdaki kod snippet'inde gösterildiği gibi, geçirilebilir operatörler kullanmanız gerekecektir:

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

Bunun nedeni, RxJS ekibinin kullanım desteğini kaldırmasıdır . Daha fazla bilgi için RxJS değişiklik günlüğünde yapılan değişikliklere bakın .

Değişiklik günlüğünden:

Operatörler : Pipeable operatörler artık rxjs ithal edilmelidir, böylece gibi: import { map, filter, switchMap } from 'rxjs/operators';. Derin ithalat yok.


Büyütme işleminde geçersiz modül adı, '../../Observable' modülü bulunamadı. 'Map' özelliği 'Observable <Response>' türünde mevcut değil.
— Malik Keşmiri

ObservableSınıfı nasıl içe aktarıyorsunuz? Bunun gibi: import {Observable} from 'rxjs/Observable';veya import {Observable} from 'rxjs/Rx';?
— Thierry Templier

Şu ana kadar bu sınıfı ithal etmiyorum
— Malik Kashmiri

1
Angular 2 RC1 ve rxjs 5.0.0-beta2 kullanıyorum. Gözlemlenebilir'i "rxjs / gözlemlenebilir" den içe aktarma {Gözlemlenebilir} olarak içe aktardım; ve 'rxjs / add / operator / map' gibi içe aktarılmış harita operatörü; Beta 7 kullanırken çalışıyordum. RC1'e geçtim ve kırıldı.
— Darshan Puranik

4
Öncelikle bu komutu projenizin vs kod terminaline yazın ve projeyi yeniden başlatın. npm install rxjs-compat, mapişleci içe aktarma .
— Karan Raiyani

164

Çözümüm burada listelenmediği için bunu tekrar ziyaret ediyorum.

Rxjs 6.0 ile Angular 6 çalıştırıyorum ve bu hatayla karşılaştım.

İşte bunu düzeltmek için yaptım:

Değiştim

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

basitçe:

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

Düzeltmeyi burada buldum:

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


1
Geçiş aracı neden rxjs-5-to-6-migrate'ın bunu almadığından emin değilim? İçe aktarma aracı tanıdığı halde, ortamımda hala çözülmemiş olan do / tap yeniden eşlemesini ele almaması ilginçtir. Açısal geliştirmedeki 'beklenmeyen boşa harcanma süremin'% 90'ı RxJS belgesi ve kod sınırı sorunları ile harcanıyor, bu gerçekten sinir bozucu.
— Joe

1
Teşekkür ederim! Sen bir hayat kurtarıcısın!! Kim ilgileniyorsa, bu değişikliğe tam referans burada bulunabilir: github.com/ReactiveX/rxjs/blob/master/…
— malvadao

23
Bu benim için çalıştı, ben de eklemem gerekiyorimport { map } from 'rxjs/operators';
— paul

Komik, bu tam olarak açısal 6 yükseltmesinde nasıl düzelttiğimiz - son rxjs'i de getirdi.
— Max

3
@paul Teşekkürler. İle ilgili olarak .catch, biz kullanabilirsiniz catchErrorgibi .pipe(catchError(this.handleError))?
— FindOutIslamNow

61

bu komutu projenizin vs kod terminaline yazın ve projeyi yeniden başlatın.

npm install rxjs-compat

Bunu mapyazarak operatörü içe aktarmanız gerekir :

import 'rxjs/add/operator/map';

1
işe yaramazsa tüm dosyaları kapatın ve vs studio'yu yeniden başlatın.
— Ajay Takur

1
Bu benim için çalıştı, paylaştığın için teşekkürler.
— thesamoanppprogrammer

31

Açısal 7v için

Değişiklik

import 'rxjs/add/operator/map';

için

import { map } from "rxjs/operators"; 

Ve

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

Boru ile doğru sözdizimini gördüğümde @ Katana24'te bana yardımcı oldu.
— punkolog

bu çözüm, 'CommonJS'yi veya AMD bağımlılıklarını düzelt' optimizasyon kurtarmalarına neden olabilir 'gibi uyarılar verecek olan rxjs-compat yüklemeye gerek duymadığında açısal 10'da iyi çalışır
— mrapi

25

Açısal 2.0.1 ile aynı sorunu yaşadım çünkü Gözlemlenebilir'i içe aktarıyordum

import { Observable } from 'rxjs/Observable';

Bunun yerine Gözlemlenebilir'i içe aktarma sorunumu çözdüm

import { Observable } from 'rxjs';

Bu ifade, paket boyutu dostu olarak değerlendirilmez, çünkü bu ifade, Observable(kullanmayanlar da dahil olmak üzere) tüm operatörleri pakete içe aktarır . Bunun yerine, her bir operatörü ayrı ayrı içe aktarmanız gerekir. Daha iyi ağaç sarsıntısını desteklemek için RxJS v5.5'te tanıtılan "izin verilen operatörler" kullanılmasını öneriyorum.
— Sarun Intaralawan

15

Rxjs 6'da harita operatörü kullanımı şimdi değiştirildi.

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

Referans için https://www.academind.com/learn/javascript/rxjs-6-what-changed/#operators-update-path


Yapan herkesin RxJS v6kullanması gerekeceği için .pipe()ya da hiçbiri doğrudan Gözlemlenebilir üzerinde çalışmayacağından bu yanıtı not edin . Property 'share' does not exist on type 'Observable<{}>'
— atconway

8

sadece terminalde rxjs-compat yükleyin:

npm install --save rxjs-compat

ardından içe aktarın:

import 'rxjs/Rx';

8

En son Açısal 7. *. * 'De bunu basitçe şu şekilde deneyebilirsiniz:

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

Ve sonra bunları methodsaşağıdaki gibi kullanabilirsiniz :

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

Daha fazla ayrıntı için bu demoya göz atın .


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

Yukarıdaki işlevde ben im HttpClient kullanarak beri res.json () kullanmak vermedi görebilirsiniz. Res.json () öğesini otomatik olarak uygular ve Gözlemlenebilir (HttpResponse <string>) öğesini döndürür. HttpClient'teki açısal 4'ten sonra artık bu işlevi kendiniz çağırmanıza gerek yok.


5

Benim durumumda sadece harita ve söz vermek yeterli olmaz:

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

Resmi belgelerin önerdiği gibi birkaç rxjs bileşenini içe aktararak bu sorunu çözdüm :

1) İfadeleri bir app / rxjs-operators.ts dosyasına aktarın:

// 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) Hizmetinizde rxjs-operatörünün kendisini içe aktarın:

// Add the RxJS Observable operators we need in this app.
import './rxjs-operators';

Her hizmete rxjs-operatörlerini dahil etmek doğru değil. Yalnızca app.module.ts dosyasına dahil edilmelidir, ancak operatörler belirli yerlerde içe aktarılmadıysa maalesef test atışları hata veriyor
— Mohan Ram

3

Aynı sorun vardı, eski bir daktilo sürümü olan Visual studio 2015 kullanıyordum.

Uzantıyı yükselttikten sonra sorun çözüldü.

İndirme: {link


3

Açısal 5.2 kullanıyorum ve kullandığımda import 'rxjs/Rx';bana aşağıdaki tüy bırakma hatası atıyor: TSLint: Bu içe aktarma kara listeye alındı, bunun yerine bir alt modül içeri aktar (import-blacklist)

Aşağıdaki ekran görüntüsüne bakın: Rxjs / Rx ithalatı Açısal 5.2'de kara listeye alındı

ÇÖZÜM: Yalnızca ihtiyacım olan operatörleri içe aktararak çözdüm . Aşağıdaki örnek:

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

Yani düzeltme sadece gerekli operatörleri almak olacaktır.


@AndrewBenjamin Bunu yapmanızı şiddetle tavsiye ederim. Bu size şeritte çok fazla sorun kurtaracak.
— Devner

3

Sorunu çözmek için rxjs-compat'u kurmanız yeterli

npm i rxjs-compat --save-dev

Ve aşağıdaki gibi içe aktarın

import 'rxjs/Rx';

3

Her şeyden önce kurulumu aşağıdaki gibi çalıştırın:

npm install --save rxjs-compat@6

Şimdi ithalat gerekir rxjsin service.ts:

import 'rxjs/Rx'; 

İşte bu kadar! Sorun giderildi.



2

Hiçbiri işe yaramadı, yukarıda gönderilen tüm olası cevapları denedim

Ben sadece IDE yani Visual Studio Code yeniden başlatarak çözüldü

Birine yardım etsin.


2

Ben de aynı hatayla karşılaştım. Benim için çalıştı bir çözüm sizin şu satırları eklemek oldu service.ts dosya yerine ait import 'rxjs/add/operator/map':

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

Örneğin, hata ayıklamadan sonra app.service.ts'im şöyleydi ,

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

2

'Rxjs / add / operator / map' dosyasını içe aktardıktan sonra veya 'rxjs / Rx' dosyasını içe aktardıktan sonra aynı hatayı alıyorsanız, görsel stüdyo kod düzenleyicinizi yeniden başlatın, hata çözülecektir.


1

bu sorunu yaşayan tüm linux kullanıcıları için, rxjs-compat klasörünün kilitli olup olmadığını kontrol edin. Ben de aynı sorunu vardı ve ben terminal gitti, sudo su tüm rxjs-compat klasörüne izin vermek için kullanılır ve düzeltildi. İçe aktardığınız varsayılıyor

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

özgün .map hatasının oluştuğu project.ts dosyasında.


1

İşlevdeki mapişlevi kullanın ve pipesorununuzu çözecektir. Belgeleri buradan kontrol edebilirsiniz .

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


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

 }

komutu çalıştır

 npm install rxjs-compat 

Sadece içe aktarıyorum

 import 'rxjs/add/operator/map';

vs kodu yeniden başlatın, sorun çözüldü.


-1

Açısal yeni sürüm .map'i desteklemiyor. not: bu satırları içe aktarmayı unutmayın.

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

1
Bu geç cevap gereksizdir.
— Tom Faltesek
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.