我一直在使用Angular 16、TypScript和电影数据库(TMDB)开发SPA.

app\services\movie-service.service.ts中我有:

import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';
import { environment } from '../../environments/environment';
import { HttpClient } from '@angular/common/http';
import { MovieResponse, Movie } from '../models/Movie';

@Injectable({
  providedIn: 'root'
})

export class MovieService {

  constructor(private http: HttpClient) { }

  public getMovies(): Observable<MovieResponse[]> {
    return this.http.get<MovieResponse[]>(`${environment.apiUrl}/movie/now_playing?api_key=${environment.apiKey}`);
  }
}

型号app\models\Movie.ts看起来是这样的:

export interface Movie {
    id?: number;
    adult?: boolean;
    backdrop_path?: string;
    poster_path?: string;
    title?: string;
    tagline?: string;
    overview?: string;
    genre_ids?: any;
    original_title?: string;
    release_date?: string;
    runtime?: number;
    vote_average?: string;
}

export interface MovieResponse {
    results?: Movie[];
    total_pages?: number;
    total_results?: number;
    page?: number;
}

HomePageComponent中,我try 输出电影:

import { Component } from '@angular/core';
import { MovieResponse, Movie } from '../../models/Movie';
import { MovieService } from '../../services/movie-service.service';


@Component({
  selector: 'app-home-page',
  templateUrl: './home-page.component.html',
  styleUrls: ['./home-page.component.scss']
})
export class HomePageComponent {

  public movieResponse!: MovieResponse[];

  public movies: Movie[] = [];

  constructor(private movieService: MovieService) { }

  public getMovies() {
    this.movieService.getMovies().subscribe((response) => {
      this.movieResponse = response;

      console.log(this.movieResponse);

      this.movies = this.movieResponse.results;
    })
  }

  ngOnInit() {
    this.getMovies();
  }
}

console.log(this.movieResponse)正确地显示带有results arary、total_pages等的响应;

问题

this.movies = this.movieResponse.results导致错误:

TS2339: Property 'results' does not exist on type 'MovieResponse[]'.

Questions

  1. 我做错了什么?
  2. 解决此问题的最可靠方法是什么?

推荐答案

movieResponse有一个对象数组(电影响应),每个对象都有自己的结果属性!

由于请求有效负载没有共享,因此我们只能访问第一个元素的results

您可以只访问数组中的一个元素,而不是访问整个数组!

  public getMovies() {
    this.movieService.getMovies().subscribe((response) => {
      this.movieResponse = response;

      console.log(this.movieResponse);

      this.movies = this.movieResponse[0].results; // <-  changed here!
    })
  }

如果您从API仅收到一个电影响应,则您需要将代码更改为下面.我们可以用MovieResponse取代MovieResponse[]

  public getMovies(): Observable<MovieResponse> {
    return this.http.get<MovieResponse>(`${environment.apiUrl}/movie/now_playing?api_key=${environment.apiKey}`);
  }

ts

export class HomePageComponent {

  public movieResponse!: MovieResponse;

  public movies: Movie[] = [];

  constructor(private movieService: MovieService) { }

  public getMovies() {
    this.movieService.getMovies().subscribe((response) => {
      this.movieResponse = response;

      console.log(this.movieResponse);

      this.movies = this.movieResponse.results;
    })
  }

  ngOnInit() {
    this.getMovies();
  }
}

Javascript相关问答推荐

调用SEARCH函数后,程序不会结束

如何在NightWatch.js测试中允许浏览器权限?

成帧器运动中的运动组件为何以收件箱开始?

字节数组通过echo框架传输到JS blob

如何从一个列表中创建一个2列的表?

你怎么看啦啦队的回应?

如何从网站www.example.com获取表与Cheerio谷歌应用程序脚本

如何从HTML对话框中检索单选项组的值?

使用Java脚本导入gltf场景并创建边界框

如何将多维数组插入到另一个多维数组中?

将Node.js包发布到GitHub包-错误ENEEDAUTH

如何在.NET Core中将chtml文件链接到Java脚本文件?

创建以键值对为有效负载的Redux Reducer时,基于键的类型检测

为什么JPG图像不能在VITE中导入以进行react ?

使用类型:assets资源 /资源&时,webpack的配置对象&无效

Next.js无法从外部本地主机获取图像

在没有任何悬停或其他触发的情况下连续交换图像

我的NavLink活动类在REACT-ROUTER-V6中出现问题

如何将字符串拆分成单词并跟踪每个单词的索引(在原始字符串中)?

使用静态函数保存 node 前的钩子