访问数组

时间:2017-04-22 06:13:50

标签: angular angular2-template

我有这样的数据:

{"results":[{"id":65,"title":"rap god 3","rating":"9.0","genres":[{"id":14,"name":"New Genre"},{"id":550,"name":"bollywood"}]},{"id":68,"title":"bol naa","rating":"3.1","genres":[{"id":45,"name":"LOLOL"}]},{"id":69,"title":"rap god 2","rating":"2.0","genres":[]},{"id":70,"title":"last track","rating":"3.0","genres":[{"id":17,"name":"horror"}]},{"id":71,"title":"animalsssss","rating":"4.0","genres":[{"id":22,"name":"lol"}]},{"id":72,"title":"sanam re sanam re","rating":"3.0","genres":[{"id":10,"name":"surf excel"},{"id":16,"name":"Trancee"},{"id":21,"name":"indie-rockk"}]},{"id":73,"title":"testing data for genre","rating":"3.0","genres":[]},{"id":74,"title":"testing data for multi genre","rating":"2.2","genres":[]},{"id":75,"title":"hip hop","rating":"5.0","genres":[{"id":10,"name":"surf excel"}]},{"id":76,"title":"animals","rating":"3.0","genres":[{"id":12,"name":"bollywood"},{"id":17,"name":"horror"},{"id":18,"name":"india jeet bhai ppp"},{"id":21,"name":"indie-rockk"}]},{"id":77,"title":"bolly","rating":"2.0","genres":[{"id":21,"name":"indie-rockk"}]},{"id":78,"title":"sass","rating":"3.0","genres":[{"id":20,"name":"classical"}]},{"id":79,"title":"done","rating":"5.0","genres":[{"id":16,"name":"Trancee"}]},{"id":80,"title":"baskar","rating":"2.0","genres":[]},{"id":81,"title":"sass","rating":"5.0","genres":[{"id":22,"name":"lol"}]},{"id":82,"title":"ano 2","rating":"3.0","genres":[]},{"id":83,"title":"sanam re sanam re","rating":"3.2","genres":[]},{"id":84,"title":"sanam re sanam re","rating":"3.2","genres":[]},{"id":85,"title":"kuch na kho","rating":"4.0","genres":[{"id":10,"name":"surf excel"}]},{"id":86,"title":"sat sat","rating":"4.0","genres":[]}]}

现在我要打印标题,流派和评级。评级应该是星星的形式。具有多个类型的数据,类型应由|分隔符号。例如:说唱神[新类型|宝莱坞]评级为明星。

我试过这个,但没有打印出类型

  <li class="list-group-item" *ngFor="let item of tracks|filter:term">
      {{item.title}}
      <div *ngFor="let genre of tracks.genres">
      {{tracks.genres?.tracks.genres.name}}
    </div>

我正在使用角度2 ..请帮助..

1 个答案:

答案 0 :(得分:1)

Angular不附带filter pipe。并假设您的tracks表示results如下所示:

const data = {
  "results": ...
}

tracks = data.results

现在,您的模板如下所示:

<li class="list-group-item" *ngFor="let item of tracks">
  {{item.title}}
  [
  <span *ngFor="let genre of item.genres; let lst = last;">
    {{genre?.name}}
    <ng-container *ngIf="!lst"><!-- if not last item, print | -->
      |
    </ng-container>
  </span>
  ]
</li>

演示:https://plnkr.co/edit/noaAJVEJqsz0FZivv7iz?p=preview