속성 'map'이(가) '관찰 가능' 유형에 없습니다.

속성 'map'이(가) '관찰 가능' 유형에 없습니다.

Angular에서 API를 호출하려고 하는데 다음 오류가 발생합니다.

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

이와 유사한 질문의 답변은 제 문제를 해결하지 못했습니다.Angular 2 베타.17: '관찰 가능한 <응답> 유형에 'map' 속성이 없습니다.

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 변경 로그의 변경 사항을 참조하십시오.

변경 로그에서:

연산자: 이제 다음과 같이 파이프 가능 연산자를 rxjs에서 가져와야 합니다.import { map, filter, switchMap } from 'rxjs/operators';딥 임포트 없음.

내 솔루션이 여기에 나열되어 있지 않기 때문에 다시 방문합니다.

나는 rxjs 6.0으로 Angular 6를 실행하고 있는데 이 오류가 발생했습니다.

제가 고치기 위해 한 일은 다음과 같습니다.

나는 변했어요

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

간단히 말하자면:

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

여기서 해결책을 찾았습니다.

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

프로젝트의 VS Code 터미널에 이 명령어를 작성하고 프로젝트를 다시 시작하면 됩니다.

npm install rxjs-compat

은 다을가합다니를 .map연산자를 추가합니다.

import 'rxjs/add/operator/map';

Angular 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에서도 같은 문제가 있었습니다.

import { Observable } from 'rxjs/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/ #vmdk-update-path

각도가 있는 새 버전의 httpClient 모듈에서는 아직 다음과 같은 방식으로 쓰지 않았습니다.

return this.http.request(request)
      .map((res: Response) => res.json());

하지만 이런 식으로 하라.

return this.http.request(request)
             .pipe(
               map((res: any) => res.json())
             );

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

자세한 내용은 이 데모를 참조하십시오.

terminal: 을 입력하여 rxjs-compat을 설치합니다.

npm install --save rxjs-compat

그런 다음 가져오기:

import 'rxjs/Rx';

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

위의 함수에서 제가 HttpClient를 사용한 이후로 res.json()을 사용하지 않았음을 알 수 있습니다.res.json()을 자동으로 적용하고 Observable(HttpResponse < string>)을 반환합니다.HttpClient에서 각도 4 이후에는 더 이상 직접 이 함수를 호출할 필요가 없습니다.

저의 경우 지도와 약속만 포함하기에는 충분하지 않습니다.

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

공식 문서에서 권장하는 대로 여러 rxjs 구성 요소를 가져와 이 문제를 해결했습니다.

하나의 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';

서비스에서 rxjs-operator 자체 가져오기:

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

Angular v10.x 및 rxjs v6.x에서

내 서비스의 첫 번째 지도 가져오기,

import {map} from 'rxjs/operators';

그리고 이렇게 지도를 사용합니다.

return this.http.get<return type>(URL)
  .pipe(map(x => {
    // here return your pattern
    return x.foo;
  }));

이전 버전의 유형 스크립트가 있는 Visual studio 2015를 사용하고 있었습니다.

확장을 업그레이드한 후 문제가 해결되었습니다.

링크 다운로드

는 Angular 5하고 있고 Angular 5.할 때는 Angular 5.2를 사용합니다.import 'rxjs/Rx';다음과 같은 린트 오류가 발생합니다. TSLint: 이 가져오기는 블랙리스트에 있습니다. 대신 하위 모듈을 가져옵니다(가져오기-블랙리스트).

아래 스크린샷을 참조하십시오.

솔루션: 필요한 연산자만 가져와 문제를 해결했습니다.예는 다음과 같습니다.

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

따라서 해결책은 특별히 필요한 연산자만 가져오는 것입니다.

저도 같은 오류에 직면했습니다.제게 효과가 있었던 한 가지 해결책은 당신의 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-compat을 설치하기만 하면 됩니다.

npm i rxjs-compat --save-dev

그리고 아래와 같이 수입합니다.

import 'rxjs/Rx';

먼저 아래와 같이 설치를 실행합니다.

npm install --save rxjs-compat@6

은 이제가필있다니습가요올져를 가져와야 .rxjsservice.ts:

import 'rxjs/Rx'; 

Voila! 문제가 해결되었습니다.

간단히 실행되는npm install --save rxjs-compat오류를 수정합니다.

여기에서 권장합니다.

위에 게시된 가능한 모든 답변을 시도해 봤는데, 아무 것도 효과가 없었습니다.

IDE(Visual Studio Code)를 다시 시작하여 문제를 해결했습니다.

누군가에게 도움이 되길.

을 합니다.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;
  })
})

'rxjs/add/operator/map' 가져오기 또는 'rxjs/Rx' 가져오기를 수행한 후 동일한 오류가 발생하면 시각적 스튜디오 코드 편집기를 다시 시작하면 오류가 해결됩니다.

이 문제가 있는 모든 Linux 사용자의 경우 rxjs-compat 폴더가 잠겨 있는지 확인합니다.저도 똑같은 문제가 있어서 터미널에 가서 sudosu를 사용하여 rxjs-compat 폴더 전체에 권한을 부여하고 수정했습니다.그것은 당신이 그것을 수입했다고 가정합니다.

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

원본 .map 오류가 발생한 project.ts 파일에 있습니다.

npm 설치 rxjs@6 rxjs-compat@6 --저장

https://github.com/nagamallabhanu 덕분입니다.

https://github.com/webmaxru/pwa-workshop-angular/issues/2#issuecomment-395024755

캡슐화된

파이프(지도(...))

일했다

import { map } from 'rxjs/operators';

courseRef: AngularFireList<any>;
courses$: Observable<any[]>;

this.courseRef = db.list('/tags');
  this.courses$ = this.courseRef.snapshotChanges()
  .pipe(map(changes => {
      return changes.map(c => ({ key: c.payload.key, ...c.payload.val() 
  }));
 }));
 this.courses$.subscribe(res=>{
   console.log(res)
 })

  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 코드를 다시 시작하면 문제가 해결됩니다.

각도 9:

 forkJoin([
  this.http.get().pipe(
    catchError((error) => {
      return of([]);
    })
  ),
  this.http.get().pipe(
    catchError((error) => {
      return of([]);
    })
  ),

이 오래된 방법을 사용하여 경로 매개변수를 가져오는 경우

 this._route.params
        .map(params => params['id'])

새 rxjs 버전에 대해 업데이트하려면 다음과 같이 하십시오.

먼저 rxjs 연산자에서 맵을 가져옵니다.

import { map } from 'rxjs/operators';

두 번째 추가 파이프,

   this._route.params.pipe(
            map(params => params['id']))

저는 같은 문제를 가지고 있습니다. 저는 다음과 같이 해결합니다.

import { map } from 'rxjs/operators'; // imports statement 

return this.auth.user$.pipe(
  map(user =>{
    if(user) return true;
        this.router.navigate(['/login'], { queryParams: {returnUrl :state.url}});
    return false;
  }));
}

관찰 가능한 유형이 null인 문제가 있어서 유형 any를 추가했는데 많은 오류를 해결하는 데 도움이 되었습니다.

user$: Observable<firebase.User | any>;

각진 새 버전은 .map을 지원하지 않습니다. cmd npm install --save rxjs-compat을 통해 설치해야 합니다. 이를 통해 오래된 기술로 즐길 수 있습니다. 참고: 이 줄을 가져오는 것을 잊지 마십시오.

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

언급URL : https://stackoverflow.com/questions/37208801/property-map-does-not-exist-on-type-observableresponse