未被捕获的类型错误无法读取属性' touppercase'未定义的Observable._subscribe

时间:2017-11-15 16:18:55

标签: angular typescript ionic-framework mobile

我有一个问题。我用离子框架开发移动应用程序。它的电影应用程序。我在github上找到了一个例子,并尝试在我的项目中实现一些功能和设计。

我有页面' Store'。当我启动项目时,我收到错误

  

未捕获(承诺):TypeError:无法读取属性' toUpperCase'未定义的TypeError:无法读取属性' toUpperCase'在Observable._subscribe

中未定义

它来自ngOnInit函数,但我看不出有什么问题。我刚刚开始学习离子框架,ts和角度的移动开发。我会很高兴得到任何帮助。

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { MovieService } from '../../services/movie-service';
import { MovieDetailsPage } from '../movie-details/movie-details';

@Component({
  selector: 'page-store',
  templateUrl: 'store.html'
})
 export class StorePage {

  movies: Array<any>;

     constructor(public navCtrl: NavController, private movieService: 
 MovieService) {

     }

     ngOnInit(){
        this.movieService.send('getMovies').subscribe(a => {
            console.log(a);
            this.movies = a.results.map(b => {
                return {
                    id: b.id,
                    title: b.title,
                    image: b.poster_path,
                    overview: b.overview,
                    rating: b.vote_average
                }
            })
        });
     }

     searchMovieDB(event, key) {
         if(event.target.value.length > 2) {
             this.movieService.searchMovies(event.target.value).subscribe(
                 data => {
                     this.movies = data.results; 
                     console.log(data);
                 },
                 err => {
                     console.log(err);
                 },
                 () => console.log('Movie Search Complete')
              );
         }
     } 

     itemTapped(event, movie) {
         //console.log(movie);
         this.movieService.send('getSingleMovie', movie.id).subscribe(data 
  => console.log(data));  
         this.navCtrl.push(MovieDetailsPage, {
             movie: movie
         });
     }

 }

这是&#39; MovieService&#39;我用来创建api请求:

import { Injectable } from '@angular/core';
import {Http, Headers, RequestMethod, Request} from '@angular/http';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/map';

@Injectable()
export class MovieService {

    constructor(private http:Http) {

    }

    searchMovies(movieName) {
        var url = 'http://api.themoviedb.org/3/search/movie?query=&query=' + 
encodeURI(movieName) + '&api_key=xxxxxxxxxxxxxxxxxx';

        var response = this.http.get(url).map(res => res.json());
        return response;
    }

    send(name, id?, item?) {

                let url: string,
                    body: any,
                    api_key: string = 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxx';

                if(name == 'getMovies')
                    url = 'http://api.themoviedb.org/3/movie/'+id+'?
api_key=' + api_key;
                else if (name == 'getMoviesByPage')
                    url = 'http://api.themoviedb.org/3/movie/popular?
api_key='+api_key+'&page=' + id;
                else if (name == 'getSingleMovie')
                    url = 'https://api.themoviedb.org/3/movie/'+id+'?
api_key=' + api_key;
                else if (name == 'getVideo')
                    url = 'https://api.themoviedb.org/3/movie/'+id+'/videos?
api_key=' + api_key;
                else if (name == 'getImages')
                    url = 'https://api.themoviedb.org/3/movie/'+id+'/images?
api_key=' + api_key;


                let options = {
                    url: url,
                    body: null
                };

                if (item) {
                    body = typeof item === 'string' ? item : 
 JSON.stringify(item);
                    options.body = body;
                }


                return this.http.request(new Request(options))
                    .map(res => res.json())

            }
}

1 个答案:

答案 0 :(得分:0)

问题在于您使用Request(顺便说一下,它与Http一起弃用)。你可能只想提出请求,真正没有其他需要。我在你的代码中看到了一些问题,例如当基于id获取单个电影时,你的应用会在subscribe内部的映射中抛出错误,因为你从获取一个电影中获得的数据只会返回一个对象,而不是阵列。所以你需要重新考虑一下!

但是这里有一个基于id获得一部电影的样本:

send(name, id?, item?) {
  let url: string,
  api_key: string = 'xxxxxxxxxxxxxxxxxxxxxxx';

  if (name == 'getMovies') 
    url = 'https://api.themoviedb.org/3/movie/' + id + '?api_key=' + api_key

  return this.http.get(url)
    .map(res => res.json())
}

组件:

ngOnInit() {
  this.movieService.send('getMovies').subscribe(a => {
    this.movies = a // will not be an array in this case, just an object! 
  });
}