this.http.get（...）。map不是函数

Question

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

的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

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

import 'rxjs/add/operator/map';

import { map } from 'rxjs/operators';

指管道/可调运营商map

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

Lettable Operators Doc

Answer 2

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

import { map } from 'rxjs/operators';

OR

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';

OR

import 'rxjs/add/operators/map';