如何在 table 中显示嵌套 json 数组的数据

Question

这是我的英雄json:

herolist = [{
    sl: 1,
    title: 'Batman',
    gender: 'male',
    firstname: 'Bruce',
    lastname: 'Wayne',
    city: 'Gotham',
    ticketprice: 123.4567,
    releasedate: '1/26/2018',
    poster: 'assets/images/batman.jpg',
    movieslist: [
        {
            title: 'Batman Begins',
            poster: 'assets/images/bat1_tn.jpg'
        }, {
            title: 'Dark Knight',
            poster: 'assets/images/bat2_tn.jpg'
        }, {
            title: 'Dark Knight Raises',
            poster: 'assets/images/bat3_tn.jpg'
        }
    ]

}

我有一个嵌套数组作为电影列表。我需要在 table.

中显示电影列表中的所有这些图块

我按照以下方法显示剩余项目

<h1>Heroes List Application</h1>
  <ul>
    <li *ngFor="let hero of herolist">{{hero.title}}</li>
  </ul>
  <div class="table-responsive">
  <table class="table table-striped table table-bordered table table-hover">
    <thead class="thead-dark">
      <tr>
      <th>Sl #</th>
        <th>Title</th>
        <th>Full Name</th>
        <th>Poster</th>
        <th>City</th>
        <th>Ticket Price</th>
        <th>Release Date</th>
        <th>Movies List</th>
      </tr>
    </thead>
    <tbody>
      <tr *ngFor="let hero of herolist">
        <td>{{hero.sl}}</td>
        <td>{{hero.title | titlecase }}</td>
        <td>{{hero.firstname+' '+hero.lastname}}</td>
        <td>
          <img width="50" [src]="hero.poster" [alt]="hero.title">
        </td>
        <td>{{hero.city}}</td>
        <td>{{hero.ticketprice | currency : 'INR': 'symbol': '3.2-3'}}</td>
        <td>{{hero.releasedate | date }}</td>
        **<td>
        <span>{{ hero.movieslist.values()}}</span>
      </td>**
      </tr>
    </tbody>
  </table>
  </div>
  `

我需要在栏中显示电影列表。我应该如何使用 ngFor，因为它不是拍摄电影列表。

Answer 1

像这样使用 ngFor

<div *ngFor="let movie of hero.movieslist">{{ movie.title}}</div>

完整代码

<h1>Heroes List Application</h1>
  <ul>
    <li *ngFor="let hero of herolist">{{hero.title}}</li>
  </ul>
  <div class="table-responsive">
  <table class="table table-striped table table-bordered table table-hover">
    <thead class="thead-dark">
      <tr>
      <th>Sl #</th>
        <th>Title</th>
        <th>Full Name</th>
        <th>Poster</th>
        <th>City</th>
        <th>Ticket Price</th>
        <th>Release Date</th>
        <th>Movies List</th>
      </tr>
    </thead>
    <tbody>
      <tr *ngFor="let hero of herolist">
        <td>{{hero.sl}}</td>
        <td>{{hero.title | titlecase }}</td>
        <td>{{hero.firstname+' '+hero.lastname}}</td>
        <td>
          <img width="50" [src]="hero.poster" [alt]="hero.title">
        </td>
        <td>{{hero.city}}</td>
        <td>{{hero.ticketprice | currency : 'INR': 'symbol': '3.2-3'}}</td>
        <td>{{hero.releasedate | date }}</td>
        **<td>
        <div *ngFor="let movie of hero.movieslist">{{ movie.title}}
          <img src={{movie.poster}}/>
        </div>
      </td>**
      </tr>
    </tbody>
  </table>
  </div>

如何在 table 中显示嵌套 json 数组的数据

How to display data in table for nested json array

html

angular

ngfor