使用嵌套对象的模型的angularcriptcript错误

时间:2018-06-13 12:48:33

标签: angular typescript

我正在使用带有HttpClient的角度6

这是我在对OMDB api进行搜索调用时得到的结果:

{"Search":[{"Title":"Pirates of the Caribbean: At World's End","Year":"2007","imdbID":"tt0449088","Type":"movie","Poster":"https://ia.media-imdb.com/images/M/MV5BMjIyNjkxNzEyMl5BMl5BanBnXkFtZTYwMjc3MDE3._V1_SX300.jpg"},{"Title":"This Is the End","Year":"2013","imdbID":"tt1245492","Type":"movie","Poster":"https://ia.media-imdb.com/images/M/MV5BMTQxODE3NjM1Ml5BMl5BanBnXkFtZTcwMzkzNjc4OA@@._V1_SX300.jpg"},{"Title":"The World's End","Year":"2013","imdbID":"tt1213663","Type":"movie","Poster":"https://ia.media-imdb.com/images/M/MV5BNzA1MTk1MzY0OV5BMl5BanBnXkFtZTgwNjkzNTUwMDE@._V1_SX300.jpg"},{"Title":"Seeking a Friend for the End of the World","Year":"2012","imdbID":"tt1307068","Type":"movie","Poster":"https://ia.media-imdb.com/images/M/MV5BMTk4MDQ1NzE3N15BMl5BanBnXkFtZTcwMjA0MDkzNw@@._V1_SX300.jpg"},{"Title":"House at the End of the Street","Year":"2012","imdbID":"tt1582507","Type":"movie","Poster":"https://ia.media-imdb.com/images/M/MV5BMjIxNTUwNTU4N15BMl5BanBnXkFtZTcwNTE0MTI3Nw@@._V1_SX300.jpg"},{"Title":"The End of the F***ing World","Year":"2017–","imdbID":"tt6257970","Type":"series","Poster":"https://ia.media-imdb.com/images/M/MV5BMzhhMTczMDQtNWE0Yy00OTJiLTlmYjgtNWU1MmVkYTVlYWVhXkEyXkFqcGdeQXVyNjEwNTM2Mzc@._V1_SX300.jpg"},{"Title":"John Dies at the End","Year":"2012","imdbID":"tt1783732","Type":"movie","Poster":"https://images-na.ssl-images-amazon.com/images/M/MV5BMTUyNzIyNzc0MV5BMl5BanBnXkFtZTcwOTM5ODg1OA@@._V1_SX300.jpg"},{"Title":"The End of the Tour","Year":"2015","imdbID":"tt3416744","Type":"movie","Poster":"https://ia.media-imdb.com/images/M/MV5BMTUwODU3NjQxNF5BMl5BanBnXkFtZTgwODE2NTE4NTE@._V1_SX300.jpg"},{"Title":"Neon Genesis Evangelion: The End of Evangelion","Year":"1997","imdbID":"tt0169858","Type":"movie","Poster":"https://ia.media-imdb.com/images/M/MV5BYmE1ZTFjZTMtMDVjYy00ZWYwLTg2ZGUtODhhODgxMjdhYjAxXkEyXkFqcGdeQXVyMzM4MjM0Nzg@._V1_SX300.jpg"},{"Title":"The End of the Affair","Year":"1999","imdbID":"tt0172396","Type":"movie","Poster":"https://ia.media-imdb.com/images/M/MV5BYzhkNDRkMDctYTcxMy00MTI3LWI5ODQtZWNkYWQ2ZjA2ZDk2XkEyXkFqcGdeQXVyMTQxNzMzNDI@._V1_SX300.jpg"}],"totalResults":"1311","Response":"True"}

此结果包括搜索(带结果的对象),totalResults(字符串)和响应(字符串)。

我的服务文件中的搜索功能:

search(term: string): Observable<Result[]> {

    const url = `http://www.omdbapi.com?s=${term}&apikey=12345`; 

    return this.http.get<Result[]>(url).pipe(
        map(search => search.Search),
        catchError(this.handleError)
    );
}

该应用程序正常。问题是typescript编译器给出了这个错误:

Property 'Search' does not exist on type 'Result[]'.

我找不到办法处理OMDB api给我的响应。模型看起来像这样:

export class Result {
    totalResults: number;
    Response: boolean;
    Search: {
        Poster: string;
        Title: string;
        Type: string;
        Year: number;
        imdbID: string;
    };
}

2 个答案:

答案 0 :(得分:0)

属性Search是一个数组。将您的功能search(term: string)修改为search(term: array)

答案 1 :(得分:0)

http请求将返回Result[]。错误是说没有Result[].Search是真的。

你可以这样做。

map((results: Result[]) => results.map((result:Result) => result.Search))

results.map是指Array.prototype.map而不是RxJs;

您还需要提取Search接口/类并返回Observable<Search[]>