Ionic 2 / Angular2配列内のオブジェクトからデータをフェッチする

jsonファイルIonic 2からデータをプルして単純なアコーディオンを構築しようとしています。カテゴリとサブカテゴリの項目を繰り返し処理してそれらを一覧表示できますが、サブカテゴリをクリックすると、サブカテゴリオブジェクトからデータを取得して、詳細ページに表示することができません（サブカテゴリのタイトル）。私は多くの異なるチュートリアル/フォーラムを見てきましたが、これを行う方法をどこにも見つけることができませんでした。

パスの問題だけでなく、サブカテゴリオブジェクトをさらに繰り返す必要があるかもしれないと思いますか？

json

{
  "results": [
    {
      "category": "Category 1",
      "subCategory": [
          {
            "title":  "subCategory 1.1",
             "word": "hello"  
          },
        {
          "title": "subCategory 1.2",
          "word": "hello"
        }
          ]
    },
    {
      "category": "Category 2",
      "subCategory": [
        {
          "title": "subCategory 2.1",
          "word": "hello"
        },
        {
          "title": "subCategory 2.2",
          "word": "hello"
        }
      ]
    }
   ]
}

home.html

<ion-header>
    <ion-navbar color="primary">
        <ion-title>Categories</ion-title>
    </ion-navbar>
</ion-header>

<ion-content>
    <ion-list>
        <ion-item *ngFor="let item of (items | async)?.results">
            {{ item.category }}

            <div *ngFor="let subItem of item.subCategory">
                <button (click)="openDetails(item)">{{ subItem.title }}</button>
            </div>

        </ion-item>
    </ion-list>

</ion-content>

home.ts

export class HomePage {
   items: any;
   subcategories: any;

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

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

detail.html

<ion-header>
    <ion-navbar color="primary">
        <ion-title>{{ item.subCategory.title }}</ion-title> // NOT WORKING


    </ion-navbar>
</ion-header>