Ionic 2 / Angular 2 从数组中的对象获取数据

Question

我正在尝试通过从 json 文件中提取数据来在 Ionic 2 中构建一个简单的手风琴。 我可以遍历类别和子类别项目以列出它们，但是一旦单击 subcategory，我就无法从 subcategory 对象中获取数据并显示它（子类别标题）在详细信息页面上。我查看了许多不同的教程/论坛，但在任何地方都找不到如何做到这一点。

我想这不仅仅是路径的问题，而且我可能需要进一步遍历子类别对象？

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>

Answer 1

您需要将subItem 即每个子类别而不是项目发送到openDetails() 函数。

<button (click)="openDetails(subItem)">{{ subItem.title }}</button><!-- here -->

在您的 details.html 中，

你可以访问

<ion-title>{{ subItem.title }}</ion-title> <!-- make sure the parameter in ts file has name subItem. -->