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

}

- Perinban Parameshwaran

Answer 1

你正在使用点链操作符.map。导入应该是

import 'rxjs/add/operator/map';

---

import { map } from 'rxjs/operators';

指的是可管道化的操作符map

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

管道运算符文档

- LLai

---

如果我使用它，会出现404错误。请检查此链接（https://imgur.com/a/TDSlo）控制台。 - Perinban Parameshwaran

真的很令人困惑，16个小时后它自动解决了，不知道发生了什么。我认为它已经解决了，或者不知道它是否从缓存中加载。 - Perinban Parameshwaran

@PerinbanParameshwaran，你的JSON资源返回了404错误。可能是缓存问题或者你的服务器根本没有这个JSON文件。 - LLai

你可能添加了HTTP参数吗？我记得http.get除了observable之外还会返回其他东西。 - misha130

@misha130 给我一个例子。我提供的参数是我的 Firebase JSON URL。我还有什么可以添加吗？是的，这个可观察对象已经被缓存在团队页面上。 - Perinban Parameshwaran

Answer 2

对于 Angular 5 及以上版本，更新后的导入行如下：

import { map } from 'rxjs/operators';

或者

import { map } from 'rxjs/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';

- Jitendra Ahuja