使用*ngfor离子型和JSON从对象内部的数组中检索对象

Question

我很难从一个嵌套在json文件中的对象的数组中检索一个对象。

Json文件如下：

    {
    "success": {
        "total": 1
    },
    "contents": {
        "quotes": [
            {
                "quote": "You can’t succeed coming to the potluck with only a fork.",
                "author": "Dave Liniger",
                "length": "64",
                "tags": [
                    "inspire",
                    "team-building",
                    "tso-funny",
                    "working-with-people"
                ],
                "category": "inspire",
                "title": "Inspiring Quote of the day",
                "date": "2018-05-05",
                "id": null
            }
        ],
        "copyright": "2017-19 theysaidso.com"
    }
}

我试图检索嵌套在引号中的引号。

到目前为止，我一直在尝试：

    <ion-list>
<ion-item *ngFor="let c of contents"></ion-item>
<ion-item *ngFor="let q of c['quotes']">
    <h2>{{ q.quote }}</h2>
</ion-item>

然而，我一直“无法获得未定义或空引用的‘引号’属性”。

我做错什么了？

Answer 1

您的代码应该如下所示：

    <ion-list>

    <ion-item *ngFor="let q of contents.quotes">
        <h2>{{ q.quote }}</h2>

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

有关嵌套ngFor，请参阅下面的示例

@Component({
  selector: 'ngfor-grouped-example',
  template: `
 <h4>NgFor (grouped)</h4>
 <ul *ngFor="let group of peopleByCountry"> 
   <li>{{ group.country }}</li>
   <ul>
    <li *ngFor="let person of group.people"> 
      {{ person.name }}
    </li>
   </ul>
 </ul>
 `
})
class NgForGroupedExampleComponent {

  peopleByCountry: any[] = [
    {
      'country': 'UK',
      'people': [
        {
          "name": "Douglas  Pace"
        },
        {
          "name": "Mcleod  Mueller"
        },
      ]
    },
    {
      'country': 'US',
      'people': [
        {
          "name": "Day  Meyers"
        },
        {
          "name": "Aguirre  Ellis"
        },
        {
          "name": "Cook  Tyson"
        }
      ]
    }
  ];
}

您也可以参考此链接以获得更多详细信息：https://codecraft.tv/courses/angular/built-in-directives/ngfor/