Angular - 显示来自 TMDB api 的字段

Question

尝试显示来自 TMDB 电影 api 的名为“认证”的字段，我成功获取所有其他信息，但不适用于该特定字段：

电影组件代码：

import { Component, OnInit } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser';
import { ActivatedRoute } from '@angular/router';
import {MoviesService} from '../movies.service';

@Component({
  selector: 'app-movie',
  templateUrl: './movie.component.html',
  styleUrls: ['./movie.component.css']
})
export class MovieComponent implements OnInit {
  movie: Object;
  reviews: Array<Object>;
  similarMovies: Array<Object>;
  certification: Object;
  cast: Array<Object>;
  video: Object;
  constructor(
    private _moviesServices: MoviesService,
    private router: ActivatedRoute,
    private sanitizer: DomSanitizer
    ) {

  }

  ngOnInit() {
    this.router.params.subscribe((params) => {
      const id = params['id'];
      this._moviesServices.getMovie(id).subscribe(movie => {
        this.movie = movie;
      });
      this._moviesServices.getMovieReviews(id).subscribe((res: any) => {
        this.reviews = res.results;
      });
      this._moviesServices.getMovieCredits(id).subscribe((res: any) => {
        res.cast = res.cast.filter((item) => {return item.profile_path});
        this.cast = res.cast.slice(0,8);
      });
      this._moviesServices.getMovieVideos(id).subscribe((res: any) => {
        if(res.results && res.results.length) {
          this.video = res.results[0];        
          this.video['url'] = this.sanitizer.bypassSecurityTrustResourceUrl('https://www.youtube.com/embed/' + this.video['key']);
        }
      });
      this._moviesServices.getSimilarMovies(id).subscribe((res: any) => {
        console.log(res.results);
        this.similarMovies = res.results.slice(0, 18);
      });
      this._moviesServices.getCertification(id).subscribe((res: any) => {
        console.log(res.results);
        this.certification = res.results;
      });
    })
  }

}

这不起作用：

this._moviesServices.getCertification(id).subscribe((res: any) => {
        console.log(res.results);
        this.certification = res.results;
      });

html代码：

<p class="badge badge-pill badge-success p-2" *ngIf="movie.certification">
        {{movie.certification }} 
      </p>

电影服务：

getCertification(id: string) : Observable<any>  {
    const params = new HttpParams()
    .set('api_key', this.apikey);
    return this.http.get('https://api.themoviedb.org/3/movie/'+ id +'/release_dates', {params})

  }

API 网址：https://api.themoviedb.org/3/movie/99/release_dates?api_key="my_api_key"

Answer 1

根据 API 文档，发布日期端点返回每个国家/地区的发布日期集合，并且每个发布日期都有一个认证属性。

所以你真的应该做到以下几点：

在您的组件中，将您的 certification 属性更改为 Array<Object>

然后在您的 HTML 中，您将要循环遍历数组，然后循环遍历 release_dates 数组，因为每个发布日期都有一个认证。

下面的代码我不知道它是否能正确编译，但它应该给你一个想法。

<p class="badge badge-pill badge-success p-2" *ngIf="certification">
    <span *ngFor="let cert of certification">
        <span *ngFor="let release of cert.release_dates"> 
            <span *ngIf="release.certification">{{release.certification}}</span>
        </span>
    </span>
</p>

以上可能不符合您的实际要求，例如如果您只想要美国的认证，那么您可能应该在收到数据时过滤掉组件中的其余数据，例如

this._moviesServices.getCertification(id).subscribe((res: any) => {
    const usCertifications = res.results.filter(result => {
        return result.iso_3166_1 === "US";
    };
    this.certification = usCertifications;
});