我一直在使用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 } from '../models/Movie';
import { Genre, GenreResponse } from '../models/Genre';

@Injectable({
  providedIn: 'root'
})

export class MovieService {

  constructor(private http: HttpClient) { }


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

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

app\models\Movie.ts中我有:

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

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

app\components\movie-details\movie-details.component.ts中我有:

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

@Component({
  selector: 'app-movie-details',
  templateUrl: './movie-details.component.html',
  styleUrls: ['./movie-details.component.scss']
})
export class MovieDetailsComponent {

  constructor(private movieService: MovieService, private activatedRoute: ActivatedRoute) { }

  public movieResponse!: MovieResponse;
  public movie_id: Number = 0;

  public showMovieDetails() {
    this.movie_id = Number(this.activatedRoute.snapshot.paramMap.get('id'));

    this.movieService.getMovieDetails(this.movie_id).subscribe((response) => {
      this.movieResponse = response;
    });
  }

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

app\components\movie-details\movie-details.component.html中,我try 显示电影的标题:

<div *ngIf="movieResponse">
  <h1>{{ movieResponse?.original_title }}</h1>
</div>

问题

根据所需的结果,我在浏览器中看到这个错误:

TS2339: Property 'original_title' does not exist on type 'MovieResponse'.

Questions

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

推荐答案

此属性"original_title"不存在于接口"MovieResponse"上,存在于接口"Movie"上 所以您必须更改这一行:

  public movieResponse!: MovieResponse;

致:

  public movieResponse!: Movie;

并更新服务:

  public getMovieDetails(id: Number): Observable<Movie>{
    return this.http.get<Movie>(`${environment.apiUrl}/movie/${id}?api_key=${environment.apiKey}`);
  }

Javascript相关问答推荐

自定义帖子类型帖子未显示在网站上

如何在dataTables PDF输出中正确渲染字形?

类型脚本中只有字符串或数字键而不是符号键的对象

Chart.js V4切换图表中的每个条,同时每个条下有不同的标签.怎么做?

将2D数组转换为图形

在使用HighChats时如何避免Datatables重新初始化错误?

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

Nextjs 13.4 Next-Auth 4.2登录(&Quot;凭据&,{});不工作

从另一个数组中的对应行/键值对更新数组中的键值对对象

搜索功能不是在分页的每一页上进行搜索

try 使用PM2在AWS ubuntu服务器上运行 node 进程时出错

有效路径同时显示有效路径组件和不存在的路径组件

是否可以在不更改组件标识的情况下换出Reaction组件定义(以维护状态/引用等)?如果是这样的话,是如何做到的呢?

FireBase FiRestore安全规则-嵌套对象的MapDiff

顶点图使用组标签更新列之间的条宽

如何在Reaction中清除输入字段

使用Library chart.js在一个带有两个y轴的图表中绘制两个数据集

使用props 将VUE 3组件导入JS文件

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

如何调整下拉内容,使其不与其他元素重叠?