Angular 7 从 json 中获取多个值答案

【问题标题】：Angular 7 getting multiple value from the jsonAngular 7 从 json 中获取多个值
【发布时间】：2019-09-07 00:19:13
【问题描述】：

Json 示例，但从服务中获取 json 数据：

{"id":384018,"results":[{"id":"5c54548b0e0a2612ccd3d25f","iso_639_1":"en","iso_3166_1":"US","key":"9SA7FaKxZVI","name “：“快速地 & Furious Presents：Hobbs & Shaw - 官方预告片 [高清]","site":"YouTube","size":1080,"type":"预告片"}, {"id":"5cbb2b460e0a2641edef37e0","iso_639_1":"en","iso_3166_1":"US","key":"HZ7PAyCDwEg","name":"Fast & Furious Presents: Hobbs & Shaw - 官方预告片 #2 [高清]","site":"YouTube","size":1080,"type":"预告片"}, {"id":"5d16c00905a533001e7c69dd","iso_639_1":"en","iso_3166_1":"US","key":"b736ZM_KfEk","name":"Fast & Furious Presents：Hobbs & Shaw - In Theatres 8/2（最终预告片） [高清]","site":"YouTube","size":1080,"type":"预告片"}]}

服务

 getMovieVideos(id: string): Observable<any> {
    const params = new HttpParams()
      .set('api_key', this.apikey);
    return this.http.get('<<my_api_url>>' + id + '/videos', { params })

  }

组件

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-video',
  templateUrl: './movie-video.component.html',
  styleUrls: ['./movie-video.component.css']
})
export class MovieVideoComponent implements OnInit {
  movie: 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.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']);
        }
      });
    })
  }
}

HTML：

<div class="row mt-3" *ngIf="video">
    <div class="col-12">
        <div class="embed-responsive embed-responsive-16by9">
            <iframe class="embed-responsive-item" [src]="video.url" allowfullscreen></iframe>
        </div>
    </div>
</div>

目前我只能显示一个视频（json 是“key”），但想在此处显示 json 结果中的所有视频。

【问题讨论】：

您想在 iframe 中显示所有视频吗？那你为什么不添加一个 *ngFor 呢？
我试过了，但组件中缺少一些东西。只是从 Angular js 迁移到最新的，所以有点挣扎

标签： angular angular6 angular7 themoviedb-api

【解决方案1】：

你需要使用ngFor如下

<div *ngFor="let video of myObj.results">
  <iframe [src]="('https://www.youtube.com/embed/' + video.videoURL) | safe"></iframe>
</div>

STACKBLITZ DEMO

【讨论】：

谢谢！你认为我需要更改组件“this.video = res.results[0];”我猜这里 myObj 是我的组件中的视频？
this.videos = res.results;并在 HTML
感谢您的帮助！我只是错过了对模块的管道声明。现已修复 :) 谢谢！