Ionic 2 从嵌套数组中获取数据答案

【问题标题】：Ionic 2 Fetching Data From Nested ArraysIonic 2 从嵌套数组中获取数据
【发布时间】：2017-11-20 00:23:00
【问题描述】：

我是 Ionic 2 / Angular 2 的新手，我一直在尝试解决我正在构建的应用程序的一个简单问题，但到目前为止还没有找到解决方案。

我只是试图从 json 文件中获取数据以列出许多类别（电影标题）并在详细信息页面中显示更多详细信息（制作详细信息）。详细信息（导演和制片人）嵌套在 json 文件中的数组（制片）中。

虽然我能够从 json 文件中获取电影图块，一旦打开详细信息页面，我就无法访问和显示嵌套数组中的数据。

我尝试了很多不同的方法（包括使用 for Each 遍历数组，创建一个生产对象），但似乎没有任何效果。除非我遗漏了一些非常明显的东西？

有人可以帮忙吗？提前致谢！（我将永远感激任何回应。）

home.ts

export class HomePage {
   films: any;
   productions: any;

  constructor(public navCtrl: NavController, public http: Http) { 
    this.films = this.http.get("assets/data/results-data.json").map(res => res.json());
  }

  openDetails(film) {
    this.navCtrl.push('FilmDetailsPage', {film: film});
  }
}

home.html

<ion-list>
    <button ion-item *ngFor="let film of films.results" (click)="openDetails(film)">
        {{ film.title }}
    </button>
</ion-list>

results-data.json（摘录）

{
  "results": [
    {
      "title": "A New Hope",
      "production":  [
        {
        "director" : "George Lucas",
        "producer" : "Rick McCallum"
        }
      ]
    },
    {
      "title": "Attack of the Clones",
      "production": [
        {
          "director": "George Lucas",
          "producer": "Kurtz"
        }
      ]
    },

film-detail.html

    <ion-header>
    <ion-navbar color="primary">
        <ion-title>{{ film.title }}</ion-title>  // Working
    </ion-navbar>
</ion-header>

<ion-content padding>
    <ion-card>
        <ion-card-content>
            **{{ production.director }} // Not working**
        </ion-card-content>
    </ion-card>
</ion-content>

film-detail.ts

export class FilmDetailsPage {
  film: any;

  constructor(public navCtrl: NavController, public navParams: NavParams) {
    this.film = this.navParams.get('film');
  }
}

【问题讨论】：

标签： arrays json angular object ionic2

【解决方案1】：

你可以试试这个，我认为你的路径有问题：

film-detail.html

    <ion-header>
    <ion-navbar color="primary">
        <ion-title>{{ film.title }}</ion-title>  // Working
    </ion-navbar>
</ion-header>

<ion-content padding>
    <ion-card>
        <ion-card-content>
            {{ film.production[0].director }}
        </ion-card-content>
    </ion-card>
</ion-content>

【讨论】：

Merci Melchia ;) 这回答了我上面描述的问题。话虽如此，我刚刚意识到我没有完全解释我遇到的真正问题，所以我提出了一个新问题。 stackoverflow.com/questions/47403274/…
我去看看

【解决方案2】：

以角度发出ajax请求

this.http.get("assets/data/results-data.json").subscribe(data => {
  // Read the result field from the JSON response.
  this.films = data['results'];
});

【讨论】：

【解决方案3】：

你应该试试这个：

<ion-content padding>
    <ion-card>
        <ion-card-content>
            {{ film.production[0]?.director }}
        </ion-card-content>
    </ion-card>
</ion-content>

我遇到了同样的问题，但我使用上面的代码解决了我的问题。它首先呈现 html，所以这就是错误的原因，通过使用？，它会解决问题。

【讨论】：