升级到Angular 6后，TypeError: this.http.post(...).map不是一个函数。

Question

升级到Angular 6后，TypeError: this.http.post(...).map不是一个函数。

4

我在将Angular 5升级到Angular 6后遇到了一些关于rxjs6的问题：

TypeError: this.http.post(...).map is not a function

error TS2339: Property 'map' does not exist on type 'Observable<Object>'.

TypeError: rxjs__WEBPACK_IMPORTED_MODULE_1__.Observable.of is not a function

我尝试过一些方法，比如：

在service.ts中添加以下导入:

import { map } from 'rxjs/operators';

将 http.post().pipe(map(res => {...})) 进行修改

然而，所有这些方法对我都不起作用。

我的环境如下：

 "@angular/cli": "^6.0.3"
 "rxjs": "^6.2.0"
 "rxjs-compat": "^6.2.0"

以下是代码示例 Service.ts

import { Injectable } from '@angular/core';
import {environment} from '../../environments/environment';
import {HttpClient} from '@angular/common/http';
import {StorageService} from '../services/storage.service';

@Injectable()
export class VariationService {
ip = environment.url.management;
constructor(private http: HttpClient,
            private storageService: StorageService) { }
getFlowChart(status?) {
    status = status ? status : '';
    let token = this.storageService.getToken('token');
    return this.http.post(
        `${this.ip}/workflow`,
        {
            'access_token': token,
            'type': 'adjustment_workflow_get',
            'data': {
                'status': status
            }
        }
    ).map((res: Response) => {
      if ( res['errcode'] !== '00000') {
        return [];
      }
      return res['datas'];
    });
}
}

另一个 TypeScript 文件的问题

import {Injectable} from '@angular/core';
import { PreloadingStrategy, Route } from '@angular/router';
import { Observable } from 'rxjs';

@Injectable()
export class SelectivePreloadingStrategy implements PreloadingStrategy {
  preloadedModules: string[] = [];
  preload(route: Route, load: () => Observable<any>): Observable<any> {
    if (route.data && route.data['preload']) {
      this.preloadedModules.push(route.path);
     return load();
    } else {
      return Observable.of(null);
    }
  }
}

- Stellina

1

如果你能在 jsfiddle 中重现错误，那么你很有可能得到答案。 - aaaaaa

1

好的，我会再次使用 jsfiddle。 - Stellina

“not work for me” 意味着它们都会给出相同的错误信息吗？ - Henry

@Henry 确切地说，在service.ts中添加import { map } from 'rxjs/operators'，终端不会打印错误，但是IDE仍然显示错误“map'在类型'Observable <Object>'上不存在。'。改变http.post().pipe(map(res => {...}))这种方法确实不能解决所有问题。 - Stellina

Angular6 不需要使用 map 操作符来处理 API 数据。 - v8-E

显示剩余2条评论

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Vikas · Accepted Answer

RxJS v5.5.2+ 已经迁移到可管道的操作符，以改善树摇动能力并使创建自定义操作符更容易。现在需要使用 pipe 方法来组合 operators。
请参考这里
新导入方式

import { map} from 'rxjs/operators';

例子

myObservable
  .pipe(filter(data => data > 8),map(data => data * 2),)
  .subscribe(...);

创建 Observables 的方法

之前的内容

 import 'rxjs/add/observable/of';
            // or 
            import { of } from 'rxjs/observable/of
        const source = Observable.of(1, 2, 3, 4, 5);

            const subscribe = source.subscribe(val => console.log(val));

RXJS:6 语法已经改变，导入方式也有所变化。使用 of 替代 Observable.of

import { Observable, of } from 'rxjs';

    const source = of(1, 2, 3, 4, 5);

    const subscribe = source.subscribe(val => console.log(val));

修改后的代码

  import { Injectable } from '@angular/core';
import {environment} from '../../environments/environment';
import {HttpClient} from '@angular/common/http';
import {StorageService} from '../services/storage.service';
import {map} from 'rxjs/operators';

@Injectable()
export class VariationService {
ip = environment.url.management;
constructor(private http: HttpClient,
            private storageService: StorageService) { }
getFlowChart(status?) {
    status = status ? status : '';
    let token = this.storageService.getToken('token');
    return this.http.post(
        `${this.ip}/workflow`,
        {
            'access_token': token,
            'type': 'adjustment_workflow_get',
            'data': {
                'status': status
            }
        }
    ).pipe(map((res: Response) => {
      if ( res['errcode'] !== '00000') {
        return [];
      }
      return res['datas'];
    }));
}
}

修改后的代码

  import {Injectable} from '@angular/core';
import { PreloadingStrategy, Route } from '@angular/router';
import { Observable,of } from 'rxjs';

@Injectable()
export class SelectivePreloadingStrategy implements PreloadingStrategy {
  preloadedModules: string[] = [];
  preload(route: Route, load: () => Observable<any>): Observable<any> {
    if (route.data && route.data['preload']) {
      this.preloadedModules.push(route.path);
     return load();
    } else {
      return of(null);
    }
  }
}