我正在建立一个网站，展示排名前20的科幻电影。主页组件通过一个服务使用GET请求来获取包含电影数据的对象数组。该电影数据在其HTML模板中使用ngFor*呈现。
每个电影缩略图都有一个单击处理程序，该处理程序将路由到一个不同的页面，该页面将显示关于所选电影的更多信息--即描述、评级等。对于第二个页面，我使用了一个发出另一个GET请求的服务，其中查询包含所选电影的id作为参数。
呈现初始API电影数据的主页组件：

`
import { Component } from '@angular/core';
import { MovieDataService } from '../services/movie-data.service';

@Component({
  selector: 'home-card',
  templateUrl: './home-card.component.html',
  styleUrls: ['./home-card.component.css']
})
export class HomeCardComponent {

  movieData: any = {};
  constructor(private movieDataService: MovieDataService) {}

  ngOnInit(): void {
    this.movieDataService.getData().subscribe((data) => {
      this.movieData = data;
      // JSON to console
      console.warn(data);
    })
  }
}
`

主页的HTML：

`
<div class="wrapper-grid">
    <div *ngFor="let result of movieData.results;" class="container">
      <img routerLink="/movieInfo" src='https://image.tmdb.org/t/p/w780{{result.poster_path}}'   alt='thumbnail' class="thumbnail-img">
      <info-page [movieId]="result.id"></info-page>
      <p class="home-text">{{result.title}}</p>
      <p class="home-date">{{result.release_date}}</p>
    </div>
</div>
`

将呈现所选电影数据的单个电影页面

`
import { Component, Input, Output, EventEmitter } from '@angular/core';
import { single } from 'rxjs';
import { DataService } from '../services/data.service';

@Component({
  selector: 'info-page',
  templateUrl: './info-page.component.html',
  styleUrls: ['./info-page.component.css']
})
export class InfoPageComponent {

  @Input()
  movieId: number;

  singleMovieData: any = {} ;

  constructor(private DataService: DataService) {}

  getMovie() {
    this.DataService.getMovie(this.movieId).subscribe((data: any) => {
      this.singleMovieData = data;
      // console.warn(data);
      // console.log(this.movieId)
      // console.log(this.singleMovieData.id)
    })
  }

  ngOnInit(): void {
    this.getMovie()
  }

}
`

单个电影页面的服务

`
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Injectable({
  providedIn: 'root'
})
export class DataService {

  constructor(private http: HttpClient) { }

  movieId: number;

  public getMovie(movieId: number) {
    return this.http.get(`https://api.themoviedb.org/3/movie/${movieId}?  api_key=9279f87c4b7f1cb1474b6d7cd6958a6d&language=en-US`);
  }

}
`

到目前为止，每个函数都工作正常-当记录movieId和singleMovieData时，我得到了我所寻找的正确信息。
但是当在服务中执行单个电影页面的GET请求时，我得到一个404，说明movieId的参数未定义。有人能帮我解决我在这里做错了什么吗？