已解决 Angular 标识符“标题”未定义。 'Movie[]' 不包含这样的成员

Question

i'll trying to get data from backend via angular services.
i read angular docs and they said that we have to use interfaces when we want to send request to somewhere
something like this:

return this.http.get<Movie[]>(this.movieAPI)

so after that i tried to Subscribe to that service, everything works fine but i also got this error from my compiler:

ERROR in app/movie/movie-detail/movie-detail.component.html:4:12 - error TS2339: Property 'title' does not exist on type 'Movie[]'.

its like my interface doesn't know the properties
this are my files

movie.ts ( interface )

export interface Movie {
  id: number
  title: string
}

movie.service.ts

import { Injectable } from '@angular/core'
import { HttpClient } from '@angular/common/http'
import { Observable } from 'rxjs'
import { Movie } from './movie'

@Injectable({
  providedIn: 'root'
})
export class MovieService {
  movieAPI = '../../assets/movie.json' // mock data
  api = '' // i removed my api 

  constructor(
    private http: HttpClient
  ) {}

  getMovies(): Observable<Movie[]> {
    return this.http.get<Movie[]>(this.movieAPI)
  }

  searchMovie(params?: string): Observable<Movie[]> {
    return this.http.get<Movie[]>(`${this.api}/${params}`)
  }
}

movie.component.ts

import { Component, OnInit } from '@angular/core'
import { ActivatedRoute } from '@angular/router'
import { MovieService } from '../../movie/movie.service'
import { Movie } from '../../movie/movie'

@Component({
  selector: 'app-movie-detail',
  templateUrl: './movie-detail.component.html',
  styleUrls: ['./movie-detail.component.scss']
})
export class MovieDetailComponent implements OnInit {
  params: string
  movie: Movie[]

  constructor(
    private activatedRoute: ActivatedRoute,
    private movieSerivce: MovieService
  ) {
    this.getParams()
  }

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

  getDetail(): void {
    this.movieSerivce.searchMovie(this.params)
      .subscribe(
        (data:Movie[]) => this.movie = data
      )
  }

  getParams(): void {
    this.params = this.activatedRoute.snapshot.paramMap.get('id')
  }

}

movie.component.html

<h1>
  {{ movie?.title }}
</h1>
{{ movie | json }}

[Updated]
in movie.service.ts

...
searchMovie(params?: string): Observable<Movie> {
    return this.http.get<Movie>(`${this.api}/${params}`)
  }
...

in movie-detail.component.ts

...
getMovie(): void {
    const id = +this.activatedRoute.snapshot.paramMap.get('id')
    this.movieSerivce.searchMovie(`${id}`)
      .subscribe(
        (data:Movie) => this.movie = data
      )
}
...

Answer 1

The interface Movie has the title property but Movie[] does not.

In your code this.movie is of type Movie[] meaning it is an array.

The following will work:

 <h1>
   {{ movie?[0].title }}
 </h1>

If you'll change the naming from movie: Movie[] to movies: Movie[] it will be more intuitive.

You can loop the array with ngFor :

 <h1 *ngFor="let movie of movies">
   {{ movie.title }}
 </h1>

If getDetail should return only a single movie change the expected returned object like this:

 movie: Movie;  

 getDetail(): void {
    this.movieSerivce.searchMovie(this.params)
      .subscribe(
        (data:Movie) => this.movie = data
      )
  }

  searchMovie(params?: string): Observable<Movie[]> {
    return this.http.get<Movie>(`${this.api}/${params}`)
  }

Answer 2

In your service the http request returns an array not a single object. Therefore the from the array you can't access inner properties. If the service has to return an array you can to the following

use ngfor

<h1 *ngFor="let oneMovie movie">
  {{ oneMovie .title }}
</h1>