Извлечение объекта из массива внутри объекта с использованием * ngfor IONIC и JSON - PullRequest
Новая
       17

Извлечение объекта из массива внутри объекта с использованием * ngfor IONIC и JSON

0 голосов
/ 06 мая 2018

Я пытаюсь получить объект из массива, который вложен в объект в файле 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>

Однако я продолжаю получать «невозможно получить свойство« кавычек »с неопределенной или нулевой ссылкой»

Что я делаю не так?

1 Ответ

0 голосов
/ 06 мая 2018

Ваш код должен быть таким: 

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

...