Question

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

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

不幸看起来像angular不允许我这样做，有没有办法我只能在索引为0的数组中显示数组？

Fyi：这是我第一次学习角度2的试用个人项目，所以如果你看到其他任何可能以更好的方式完成的事情，请告诉你。

＆＃34; theshow＆＃34;中的数据变量如下（谷歌浏览器检查员复制/粘贴）

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的答案很接近，但遗漏了更新帖子中的关键信息。

异步提取确实意味着尚未定义showsh变量上的episodes属性。

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

将show变量的初始化从theshow = {}更改为theshow = {episodes: []}。
在渲染之前检查剧集是否存在。警卫不在我的plunker中工作，但是<table *ngIf="theshow?.episodes"><tr *ngFor="let episode of theshow.episodes[0]">正在工作（theshow?.episodes?[0]似乎不是有效的语法）。
创建适当的对象，您可以将其实例化为假人theshow: ShowInformation = new ShowInformation()，其中您已正确定义了ShowInformation类，并且它正确地将空变量构造为占位符。
使用此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>

Angular 2显示数组的特定索引

2 个答案: