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

Question

我将尝试通过 angular 服务从后端获取数据。
我读了 angular 文档，他们说当我们想向某个地方发送请求时必须使用接口
像这样：

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

所以在那之后我尝试订阅该服务，一切正常，但我也从我的编译器得到这个错误：

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

好像我的界面不知道这些属性
这是我的文件

movie.ts（界面）

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 }}

[更新]
在 movie.service.ts

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

电影中-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

接口 Movie 有 title 属性但 Movie[] 没有。

在你的代码中 this.movie 是类型 Movie[] 意味着它是一个数组。

以下将起作用：

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

如果将命名从 movie: Movie[] 更改为 movies: Movie[] 会更直观。

您可以使用 ngFor:

循环数组

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

如果 getDetail 应该 return 只有一部电影会像这样改变预期的 returned 对象：

 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

在您的服务中，http 请求 return 是一个数组，而不是单个对象。因此，您无法从数组中访问内部属性。如果服务必须 return 数组，您可以使用以下

使用 ngfor

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

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

Solved Angular Identifier 'title' is not defined. 'Movie[]' does not contain such a member

typescript

angular-services

angular