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

Question

I am using Angular 5.0.3.The error occurs when I created an promise and tried to subscribe it. When i try to execute my code, I get the following error as in the uploaded image. . I tried with every possibility to solve this error, but unfortunately I can't able to solve it.

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

}

Answer 1

You are using the dot chain operator .map . The import should be

import 'rxjs/add/operator/map';

---

import { map } from 'rxjs/operators';

refers to the pipeable operator map

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

Pipeable Operators Doc

Answer 2

For Angular versions 5 and above, the updated importing line looks like :

import { map } from 'rxjs/operators';

OR

import { map } from 'rxjs/operators';

Also these versions totally supports Pipable Operators so you can easily use .pipe() and .subscribe(). So this is how your code should look like after using .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;
            })
          );
    }

If you are using Angular version 2, then the following line should work absolutely fine :

import 'rxjs/add/operator/map';

OR

import 'rxjs/add/operators/map';