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

}

搜索.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 的回答很接近，但缺少更新帖子中的关键信息。

异步获取确实意味着 theshow 变量上的 Episodes 属性尚未定义。

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

1. 将 theshow 变量的初始化从 theshow = {} 更改为至theshow = {episodes: []} .
2. 在渲染之前检查剧集是否存在。 guard 不在我的插头中工作，但是<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

这是一个硬连线插件示例(我没有费心去实现搜索、路由等):http://plnkr.co/edit/i0Vx6cLmPyNyavLCwCeY?p=preview