Angular 2显示数组的特定索引

Question

我正在尝试使用以下代码显示/循环数组中的变量。

<tr *ngFor="let ep of theshow.episodes[0]">

不幸的是，angular 不允许我这样做，有没有办法只显示索引为 0 的数组内的数组？

仅供参考：这是我第一个尝试学习 Angular 2 的个人项目，所以如果您看到任何其他可能以更好的方式完成的事情，请告诉。

“theshow”变量中的数据如下（谷歌浏览器复制/粘贴）

Object
  name: "game of thrones"
  airtime: "21:00"
  id: 82
  episodes: Array[7]    //each array contains a season
    0: Array[10]    //each season contains all there episodes (this is season 1)
        0: Object   //episode 1
            name: "Winter is coming"
            ...
        1: Object   //episode 2
            name: "The Kingsroad"
            ...
        2: Object   //episode 3
            name: "Lord Snow"
            ...
    1: Array[10] //season 2
        0: Object   //episode 11
            name: "The North Remembers"
            ...
        1: Object   //episode 12
            name: "The Night Lands"
            ...
        2: Object   //episode 13
            name: "What is Dead May Never Die"
            ...
    ...

这是我尝试运行的完整代码。

<tr *ngFor="let ep of theshow.episodes[0]">
  <td class="mailbox-name">{{ep.name}}</td>
  <td class="mailbox-subject">{{ep.airdate}}</td>
  <td class="mailbox-date">{{ep.airtime}}</td>
</tr>

我收到的错误信息是：

Uncaught (in promise): Error: Error in ./SearchComponent class    SearchComponent - inline template:69:22 caused by: Cannot read property '0' of undefined
TypeError: Cannot read property '0' of undefined
at _View_SearchComponent2.detectChangesInternal (/AppModule/SearchComponent/component.ngfactory.js:555:61)
at _View_SearchComponent2.AppView.detectChanges (http://127.0.0.1:4200/main.bundle.js:56393:14)
at _View_SearchComponent2.DebugAppView.detectChanges (http://127.0.0.1:4200/main.bundle.js:56498:44)
at _View_SearchComponent0.AppView.detectContentChildrenChanges (http://127.0.0.1:4200/main.bundle.js:56411:19)
at _View_SearchComponent0.detectChangesInternal (/AppModule/SearchComponent/component.ngfactory.js:81:8)
at _View_SearchComponent0.AppView.detectChanges (http://127.0.0.1:4200/main.bundle.js:56393:14)
at _View_SearchComponent0.DebugAppView.detectChanges (http://127.0.0.1:4200/main.bundle.js:56498:44)
at _View_SearchComponent_Host0.AppView.detectViewChildrenChanges (http://127.0.0.1:4200/main.bundle.js:56419:19)
at _View_SearchComponent_Host0.detectChangesInternal (/AppModule/SearchComponent/host.ngfactory.js:33:8)
at _View_SearchComponent_Host0.AppView.detectChanges (http://127.0.0.1:4200/main.bundle.js:56393:14)

serie.service.ts

import { Injectable, Input } from '@angular/core';
import { Http, Response, RequestOptions, Headers } from '@angular/http';
import 'rxjs/add/operator/map';

@Injectable()
export class SerieService {
  url = "//api.tvmaze.com/search/shows?q=";

  getSerie(id){
    this.url = "http://api.tvmaze.com/shows/"+ id +"?embed=episodes";
    var re = '';
    return this._http.get(this.url).map(this.cleanSerieData);
  }

  private cleanSerieData(res: Response){
    let body = res.json();
    var tmp = [];
    body._embedded.episodes.forEach(el => {
      if(tmp[el.season-1] == undefined){
        tmp[el.season-1] = [];
      }
      tmp[el.season-1].push(el);
    });
    var clean = {
      id: body.id,
      name: body.name,
      rating: body.rating.average,
      airday: body.schedule.days,
      airtime: body.schedule.time,
      status: body.status,
      summary: body.summary,
      episodes:tmp,
      countSeasons: tmp.length,
      countEpisodes: body._embedded.episodes.length
    };
    return clean;
  }

  constructor(private _http:Http) { }

}

Search.component.ts

import { Component, OnInit } from '@angular/core';
import { SerieService } from './../serie.service';
import { Router, ActivatedRoute, Params } from '@angular/router';

@Component({
  selector: 'app-search',
  templateUrl: './search.component.html',
  styleUrls: ['./search.component.css']
})
export class SearchComponent implements OnInit {
  srh = '';
  shows = [];
  tmp = [];
  id = undefined;
  theshow = {};

  search(event:any){
    this.srh = event.target.value;

    this.serieService.getSeries(this.srh)
      .subscribe(res => {
        console.log(res);
        this.shows = res;
      })
  }

  constructor(
    private serieService: SerieService,
    private route: ActivatedRoute,
    private router: Router
  ) { }

  ngOnInit() {
    this.id = this.route.snapshot.params['id'];
    this.searchFunction();
  }



  searchFunction()
  {
    if(this.id == undefined)
    {
      console.log('search functie');
    }else{
      this.serieService.getSerie(this.id).subscribe(res => {
        console.log(res);
        this.theshow = res;
        console.log(res.episodes[0])
      });
    }
  }

}

编辑，添加代码。

最终的想法是我可以点击第 2 季（按钮）并通过更改为（使用变量 ofc）来获取第 2 季的所有剧集

非常感谢您的回复。

Answer 1

Stefan 的回答很接近，但缺少更新帖子中的关键信息。

实际上，异步获取确实意味着尚未定义 show 变量上的 episodes 属性。

到目前为止，您已经构建了三种可能的解决方案：

1. 将 show 变量的初始化从 theshow = {} 更改为 theshow = {episodes: []}。
2. 在渲染前检查剧集是否存在。守卫在我的 plunker 中不起作用，但 <table *ngIf="theshow?.episodes"><tr *ngFor="let episode of theshow.episodes[0]"> 起作用（theshow?.episodes?[0] 似乎不是有效的语法）。
3. 创建适当的对象，您可以将其实例化为虚拟对象theshow: ShowInformation = new ShowInformation()，您已在其中适当地定义了 ShowInformation 类，并且它正确地将空变量构造为占位符。
4. 使用此 QA 中的异步管道，但需要更多返工才能获得更好的长期解决方案：Problems using async pipe with ngFor in Angular2

这是一个硬连线的 plunker 示例（我没有费心实现搜索、路由等）：http://plnkr.co/edit/i0Vx6cLmPyNyavLCwCeY?p=preview

Answer 2

你可以这样做：

<tr *ngFor="let ep of theshow.episodes">
  <td class="mailbox-name">{{ep[0].name}}</td>
  <td class="mailbox-subject">{{ep[0].airdate}}</td>
  <td class="mailbox-date">{{ep[0].airtime}}</td>
</tr>