我有一个问题。我用离子框架开发移动应用程序。它的电影应用程序。我在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())
}
}
答案 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!
});
}