地图没有'；t存在于可观察的上<；对象>；使用angular 6.0.0和rxjs 6.1.0

嗨，我想学习一个关于角度的教程，但是这个教程是在9月份制作的。我相信这个人使用了cli1.3.2。我不确定他使用的是哪个版本的rxjs。我在rxjs 6.1.0中使用angular cli 6.0.0和angular 6

我遇到一个问题，找不到observable上的调用.map。 xxx/xxx/dataService.ts（19,14）中的

错误：错误TS2339:类型“Observable”上不存在属性“map”。

我查看了Observable类，没有看到一个名为map的函数

angular 6或rxjs中是否有一种新的方法来实现本教程的目标

这是我的.ts文件：

import { HttpClient } from "@angular/common/http";
import { Injectable } from "@angular/core";
import { map } from 'rxjs/operators';

@Injectable()
export class DataService {

    constructor(private http: HttpClient) {

    }

    public products = [

    ];

    loadProducts() {
        return this.http.get("/api/products")
            .map((data: any[]) => {
                this.products = data;
                return true;
            });
    }
}

这是

ng--version

λ ng --version

     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/


Angular CLI: 6.0.0
Node: 8.11.1
OS: win32 x64
Angular: 6.0.0
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.6.0
@angular-devkit/build-angular     0.6.0
@angular-devkit/build-optimizer   0.6.0
@angular-devkit/core              0.6.0
@angular-devkit/schematics        0.6.0 (cli-only)
@ngtools/webpack                  6.0.0
@schematics/angular               0.6.0 (cli-only)
@schematics/update                0.6.0 (cli-only)
rxjs                              6.1.0
typescript                        2.7.2
webpack                           4.6.0

我做了一些挖掘，在我的node_modules/rxjs/observable文件夹中没有map.*文件

λ ls -R rxjs\observable
'rxjs\observable':
ArrayLikeObservable.d.ts            IfObservable.d.ts             combineLatest.d.ts       if.js.map
ArrayLikeObservable.js              IfObservable.js               combineLatest.js         interval.d.ts
ArrayLikeObservable.js.map          IfObservable.js.map           combineLatest.js.map     interval.js
ArrayObservable.d.ts                IntervalObservable.d.ts       concat.d.ts              interval.js.map
ArrayObservable.js                  IntervalObservable.js         concat.js                merge.d.ts
ArrayObservable.js.map              IntervalObservable.js.map     concat.js.map            merge.js
BoundCallbackObservable.d.ts        IteratorObservable.d.ts       defer.d.ts               merge.js.map
BoundCallbackObservable.js          IteratorObservable.js         defer.js                 never.d.ts
BoundCallbackObservable.js.map      IteratorObservable.js.map     defer.js.map             never.js
BoundNodeCallbackObservable.d.ts    NeverObservable.d.ts          dom/                     never.js.map
BoundNodeCallbackObservable.js      NeverObservable.js            empty.d.ts               of.d.ts
BoundNodeCallbackObservable.js.map  NeverObservable.js.map        empty.js                 of.js
ConnectableObservable.d.ts          PairsObservable.d.ts          empty.js.map             of.js.map
ConnectableObservable.js            PairsObservable.js            forkJoin.d.ts            onErrorResumeNext.d.ts
ConnectableObservable.js.map        PairsObservable.js.map        forkJoin.js              onErrorResumeNext.js
DeferObservable.d.ts                PromiseObservable.d.ts        forkJoin.js.map          onErrorResumeNext.js.map DeferObservable.js                  PromiseObservable.js          from.d.ts                pairs.d.ts
DeferObservable.js.map              PromiseObservable.js.map      from.js                  pairs.js
EmptyObservable.d.ts                RangeObservable.d.ts          from.js.map              pairs.js.map
EmptyObservable.js                  RangeObservable.js            fromArray.d.ts           race.d.ts
EmptyObservable.js.map              RangeObservable.js.map        fromArray.js             race.js
ErrorObservable.d.ts                ScalarObservable.d.ts         fromArray.js.map         race.js.map
ErrorObservable.js                  ScalarObservable.js           fromEvent.d.ts           range.d.ts
ErrorObservable.js.map              ScalarObservable.js.map       fromEvent.js             range.js
ForkJoinObservable.d.ts             SubscribeOnObservable.d.ts    fromEvent.js.map         range.js.map
ForkJoinObservable.js               SubscribeOnObservable.js      fromEventPattern.d.ts    throw.d.ts
ForkJoinObservable.js.map           SubscribeOnObservable.js.map  fromEventPattern.js      throw.js
FromEventObservable.d.ts            TimerObservable.d.ts          fromEventPattern.js.map  throw.js.map
FromEventObservable.js              TimerObservable.js            fromIterable.d.ts        timer.d.ts
FromEventObservable.js.map          TimerObservable.js.map        fromIterable.js          timer.js
FromEventPatternObservable.d.ts     UsingObservable.d.ts          fromIterable.js.map      timer.js.map
FromEventPatternObservable.js       UsingObservable.js            fromPromise.d.ts         using.d.ts
FromEventPatternObservable.js.map   UsingObservable.js.map        fromPromise.js           using.js
FromObservable.d.ts                 bindCallback.d.ts             fromPromise.js.map       using.js.map
FromObservable.js                   bindCallback.js               generate.d.ts            zip.d.ts
FromObservable.js.map               bindCallback.js.map           generate.js              zip.js
GenerateObservable.d.ts             bindNodeCallback.d.ts         generate.js.map          zip.js.map
GenerateObservable.js               bindNodeCallback.js           if.d.ts
GenerateObservable.js.map           bindNodeCallback.js.map       if.js

'rxjs\observable/dom':
AjaxObservable.d.ts  AjaxObservable.js.map  WebSocketSubject.js      ajax.d.ts  ajax.js.map     webSocket.js
AjaxObservable.js    WebSocketSubject.d.ts  WebSocketSubject.js.map  ajax.js    webSocket.d.ts  webSocket.js.map

---

在

rxjs@6

您可以使用from作为独立功能：

import { from } from 'rxjs';

另请参见迁移到rxjs6指南

更新

您需要切换到管道语法，确保从rxjs/operators导入所有使用的操作符。例如：

import { map, filter, catchError, mergeMap } from 'rxjs/operators';

---

pipe

是一种可观测的方法，用于组合运算符

以下是如何在版本6中使用新方法

pipe（）

：

loadProducts() {
    return this.http.get("/api/products").
        pipe(
           map((data: any[]) => {
             this.products = data;
             return true;
           }), catchError( error => {
             return throwError( 'Something went wrong!' )
           });
        )
}

请记住，对于版本6，您现在应该使用

catchError

和

throwError

而不是：

catch

和

throw

。以下是版本6的正确导入：

loadProducts() {
    return this.http.get("/api/products").
        pipe(
           map((data: any[]) => {
             this.products = data;
             return true;
           }), catchError( error => {
             return throwError( 'Something went wrong!' )
           });
        )
}

从“rxjs”导入{Observable，of，throwError，…}

---

从“rxjs/operatros”导入{map，catchError，…}

新版本实际上不支持.map。在新的角度版本中做了一些更改。你可以通过访问angular网站来检查这些问题，但这里有一个解决这些问题的方法；在中运行这些命令 项目的cmd目标：

 npm install --save rxjs-compat

享受老技术，但别忘了在共享服务中添加以下内容：

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

---

您必须更改为管道语法：

import { Http  } from '@angular/http';
import { Injectable } from '@angular/core';
import {map, catchError} from "rxjs/operators";

import { Observable, throwError } from 'rxjs';

list():Observable<any>{
    return this.http.get(this.url)
    .pipe(
      map((e:Response)=> e.json()),
      catchError((e:Response)=> throwError(e))
    );
  }

从'@angular/Http'导入{Http}；
从“@angular/core”导入{Injectable}；
从“rxjs/operators”导入{map，catchError}；
从“rxjs”导入{observatable，throwerr}；
list（）：可观察{
返回this.http.get（this.url）
.烟斗(
map（（e:Response）=>e.json（）），
捕捉错误（（e：响应）=>投掷者（e））
);
}

由于一些模糊的原因，

rxjs compat

有时无法自动拾取，您可以自己在

polyfills.ts

中导入，例如：

import { map, filter, catchError, mergeMap } from 'rxjs/operators';

---

导入'rxjs compat'
，您可以这样做。在文件（app.component.ts）中

从'@angular/core'导入{Component}；
从'@angular/common/http'导入{HttpClient，HttpParams，HttpHeaders}；
从“rxjs”导入{observatable，throwerr}；
从“rxjs/operators”导入{map，catchError，retry}；
@组成部分({
选择器：'应用程序根'，
templateUrl:“./app.component.html”，
样式URL:['./app.component.css']
})
导出类AppComponent{
_url='1〕http://...';
构造函数（私有http:HttpClient）{}
物品：可见；
//获取信息的方法
getAPIRest（）{
const params=new-HttpParams（）.set（'parameter'，'value'）；
const headers=new HttpHeaders（）.set（'Autorization'，'auth token'）；
this.articles=this.http.get（this.url+'/articles'，{params，headers}）
.管道（重试（3），
映射（（数据=>数据），
catchError（err=>throwError（err））；
}

}我也面临同样的问题。
让我们更改导入地图的方式。使用我在下面写的代码

从“rxjs/operators”导入{map}

然后将管道与贴图一起使用。请参见示例以获得更好的理解

import {Http,Headers,Response} from '@angular/http';
import { map } from "rxjs/operators";


@Injectable({
  providedIn: 'root'
})
export class ContactServiceService {

  constructor(private http:Http) { }

  getContactList(){
    return this.http.get('http://localhost:3000/contact')
    .pipe(map(res => res.json()));
  }

}


嘿，谢谢你的帮助！这种联系帮助很大。实际上，正是这一部分帮助了我：我需要使用管道语法。@Jonathan我建议发布您自己的解决方案，这可能对未来的读者有所帮助。在Sajeetharan，很抱歉你的帖子没有直接帮助我。如果你编辑你的文章，包括关于管道的部分，并显示正确的语法，我会将其标记为答案@estus我会先让Sajeetharan编辑他的帖子，然后我会把他标记为正确的。否则，如果他在一段时间内不写，我会写我自己的帖子。这是我第一次尝试学习angular，使用rxjs和你的链接帮助很大。谢谢任何迁移到rxjs 6的人都需要阅读上面评论中的链接并添加书签。这里的信息很有价值！！文件不再可用：(