this.http.get(...).map 不是函数答案

【问题标题】：this.http.get(...).map is not a functionthis.http.get(...).map 不是函数
【发布时间】：2018-06-21 06:34:47
【问题描述】：

我正在使用 Angular 5.0.3。当我创建一个承诺并尝试订阅它时发生错误。当我尝试执行我的代码时，我在上传的图像中收到以下错误。。我尝试了各种可能性来解决这个错误，但不幸的是我无法解决它。

Elite-api.ts

import { Injectable } from '@angular/core';
import { Http,Response } from '@angular/http';

//import { HttpClient } from "@angular/common/http";

//import 'rxjs';
//import 'rxjs/add/operator/map'
import { map } from 'rxjs/operators';
//import 'rxjs/add/operator/catch';

import { Observable } from 'rsjs/Observable';

@Injectable()
export class EliteApi{

    private baseUrl = 'https://elite-schedule-c1e63.firebaseio.com//';

    currentTourney:any = {};

    constructor(private http: Http){}

    getTournaments(){
        return new Promise(resolve => {
            this.http.get(`${this.baseUrl}/tournaments.json`) 
                .subscribe((res: Response) => resolve(res.json()));
        });

        }


    getTournamentData(tourneyId) : Observable<any>{
        return this.http.get('${this.baseUrl}/tournaments-data/${tourneyId}.json')
            .map((res: Response) => {
                this.currentTourney = res.json();
                return this.currentTourney;
            });
    }

}

teams.js

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';

import { TeamHomePage } from '../team-home/team-home';

import { EliteApi } from '../../shared/elite-api'

@IonicPage()
@Component({
  selector: 'page-teams',
  templateUrl: 'teams.html',
})
export class TeamsPage {

  public teams = [];

  constructor(public navCtrl: NavController, 
              public navParams: NavParams,
              private eliteApi: EliteApi) 
              {}

  ionViewDidLoad(){

    let selectedTourney = this.navParams.data;

    this.eliteApi.getTournamentData(selectedTourney.id).subscribe(data => {
        this.teams = data.teams;
    });

  }

  itemTapped($event, team){
  this.navCtrl.push(TeamHomePage,team);
  }

}

tournaments.ts

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';

import { TeamsPage } from '../teams/teams';

import { EliteApi } from '../../shared/elite-api'

@IonicPage()
@Component({
  selector: 'page-tournaments',
  templateUrl: 'tournaments.html',
})

export class TournamentsPage {

  public tournaments:any;


  constructor(
  public navCtrl: NavController, 
  public navParams: NavParams, 
  private eliteApi : EliteApi) {
  }

  ionViewDidLoad(){
    this.eliteApi.getTournaments().then(data => this.tournaments = data);
    console.log("Loaded Successfully");
  }


  itemTapped($event, tourney){
  this.navCtrl.push(TeamsPage, tourney);
  }

}

【问题讨论】：

标签： angular typescript ionic-framework ionic2 ionic3

【解决方案1】：

您正在使用点链运算符.map。导入应该是

import 'rxjs/add/operator/map';

import { map } from 'rxjs/operators';

指的是可管道操作符map

this.http.get(...).pipe(
    map(...)
);

Pipeable Operators Doc

【讨论】：

如果我使用它，我会收到以下错误 404。检查此link 控制台
真的很混乱，16小时后自动解决了不知道发生了。我认为它解决了或者不知道它是否从缓存中加载
@PerinbanParameshwaran 是的，来自您的 json 资源的 404。一定是有缓存的东西，或者你的服务器完全没有 json 文件
您是否添加了 http 参数？我记得 http.get 会返回其他内容以及可观察的内容。
@misha130 给我一个例子。我给的参数是我的 Firebase json url。有什么我可以添加的吗？是的，该 observable 已缓存在团队页面上。

【解决方案2】：

对于 Angular 5 及更高版本，更新后的导入行如下所示：

import { map } from 'rxjs/operators';

或

import { map } from 'rxjs/operators';

此外，这些版本完全支持 Pipable Operators，因此您可以轻松使用 .pipe() 和 .subscribe()。这就是你的代码在使用 .pipe() 后的样子。：

getTournamentData(tourneyId) : Observable<any>{
        return this.http.get('${this.baseUrl}/tournaments-data/${tourneyId}.json')
            .pipe(
            .map((res: Response) => {
                this.currentTourney = res.json();
                return this.currentTourney;
            })
          );
    }

如果您使用的是 Angular 版本 2，那么以下行应该可以正常工作：

import 'rxjs/add/operator/map';

或

import 'rxjs/add/operators/map';

【讨论】：