Arrays Ionic 2从嵌套数组获取数据

我是离子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});
  }
}

export class FilmDetailsPage {
  film: any;

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

home.html

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

    <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>

    <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>

film detail.html

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

    <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>

    <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>

---

在angular中发出ajax请求

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

---

在angular中发出ajax请求

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

---

你能试试这个吗，我认为你的路径有问题：

film detail.html

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

    <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>

    <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>

{{film.title}}//工作
{{film.production[0].director}

您能试试这个吗，我认为您的路径有问题：

film detail.html

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

    <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>

    <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>

{{film.title}}//工作
{{film.production[0].director}

您应该尝试以下方法：

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

{{电影制作[0]？.导演}

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

您应该尝试以下方法：

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

{{电影制作[0]？.导演}

---

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

Merci Melchia；）这回答了我上面描述的问题。说到这里，我才意识到我没有很好地解释我所面临的真正问题，所以我提出了一个新问题。我来看看（梅西·梅尔基亚；）这回答了我上面描述的问题。说到这里，我才意识到我没有很好地解释我所面临的真正问题，所以我提出了一个新问题。我来看看