Angular affiche un objet dans un tableau via *ngFor

Question

J'ai l'ensemble suivant de données provenant d'un fichier JSON que j'essaie d'afficher via "*ngFor" dans mon modèle. Je peux afficher la plupart des données, sauf les objets "people". Il peut y avoir n'importe quel nombre d'objets "people". Cet exemple de données n'en contient que deux.

  [{
  "caseNumber": "01/01/2020",
  "caseData": {
    "caseType": "Criminal",
    "caseCompName": "",
    "caseCompNumber": "12121212",
    "caseDate": "01/02/2019",
    "caseTime": "12:00",
    "caseStatus": "Open"
  },
  "people": [{
    "name": "Paul",
    "lastName": "Von Zeuner",
    "middleName": "Waldemar",
    "dob": "1981-09-29",
    "countryBirth": "South Africa"
  },{
    "name": "John",
    "lastName": "Doe",
    "middleName": "Steve",
    "dob": "1981-09-29",
    "countryBirth": "South Africa"
  }]
 }]

J'ai tenté quelque chose comme ça mais ça n'affiche que la première personne. Je ne sais pas si le tableau lui-même est mal structuré ou si c'est le *ngFor qui pose problème.

    <div *ngFor='let item of caseData; let i=index'>
        <div class="row">
          <div class="col-sm">
            Name: {{item.people[i].name}}
          </div>
          <div class="col-sm">
            Last Name: {{item.people[i].lastName}}
          </div>
        </div>
        <div class="row">
          <div class="col-sm">
            Middel Name: {{item.people[i].middleName}}
          </div>
          <div class="col-sm">
            Country of Birth: {{item.people[i].countryBirth}}
          </div>
        </div>
    </div>

Veuillez m'aider

Answer 1

J'ai créé un échantillon fonctionnel sur stackblitz Jetez un coup d'œil.

Dans le component.ts

 data =[{
  "caseNumber": "01/01/2020",
  "caseData": {
    "caseType": "Criminal",
    "caseCompName": "",
    "caseCompNumber": "12121212",
    "caseDate": "01/02/2019",
    "caseTime": "12:00",
    "caseStatus": "Open"
  },
  "people": [{
    "name": "Paul",
    "lastName": "Von Zeuner",
    "middleName": "Waldemar",
    "dob": "1981-09-29",
    "countryBirth": "South Africa"
  },{
    "name": "John",
    "lastName": "Doe",
    "middleName": "Steve",
    "dob": "1981-09-29",
    "countryBirth": "South Africa"
  }]
 }];

Dans le composant.html

<div *ngFor='let item of data; let i=index'>
    <div *ngFor="let person of item.people">
        <div class="row">
            <div class="col-sm">
                Name: {{person.name}}
            </div>
            <div class="col-sm">
                Last Name: {{person.lastName}}
            </div>
        </div>
        <div class="row">
            <div class="col-sm">
                Middel Name: {{person.middleName}}
            </div>
            <div class="col-sm">
                Country of Birth: {{person.countryBirth}}
            </div>
            <br>
        </div>
    </div>
</div>

Answer 2

Essayez ceci

<div *ngFor='let item of people; let i=index'>
    <div class="row">
      <div class="col-sm">
        Name: {{item.name}}
      </div>
      <div class="col-sm">
        Last Name: {{item.lastName}}
      </div>
    </div>
    <div class="row">
      <div class="col-sm">
        Middel Name: {{item.middleName}}
      </div>
      <div class="col-sm">
        Country of Birth: {{item.countryBirth}}
      </div>
    </div>
</div>

Answer 3

Vous devriez utiliser 2 ngFor dans votre html.

Essayez ce code :

<div *ngFor='let item of caseData; let i=index'>
    <div *ngFor="let person of item.people" class="row">
        <div class="col-sm">
            Name: {{person.name}}
        </div>
        <div class="col-sm">
            Last Name: {{person.lastName}}
        </div>
        <div class="col-sm">
            Middel Name: {{person.middleName}}
        </div>
        <div class="col-sm">
            Country of Birth: {{person.countryBirth}}
        </div>
    </div>
</div>

Démonstration de Stackblitz

Answer 4

El JSON contient seulement 1 objet avec 3 attributs : Numéro de cas , caseData y personnes qui est un tableau d'objets.

Vous utilisez ngFor pour passer en boucle caseData alors que ce qu'il faut faire, c'est parcourir en boucle le fichier ensemble des données et ensuite boucler dans le personnes comme ci-dessous :

ComponentName.ts :

dataArray =
  [{
  "caseNumber": "01/01/2020",
  "caseData": {
    "caseType": "Criminal",
    "caseCompName": "",
    "caseCompNumber": "12121212",
    "caseDate": "01/02/2019",
    "caseTime": "12:00",
    "caseStatus": "Open"
  },
  "people": [{
    "name": "Paul",
    "lastName": "Von Zeuner",
    "middleName": "Waldemar",
    "dob": "1981-09-29",
    "countryBirth": "South Africa"
  },{
    "name": "John",
    "lastName": "Doe",
    "middleName": "Steve",
    "dob": "1981-09-29",
    "countryBirth": "South Africa"
  }]
 }]

Nom du composant.html

<div *ngFor='let item of dataArray; let i=index'>
    <div *ngFor='let person of item.people'>
        <div class="row">
          <div class="col-sm">
            Name: {{person.name}}
          </div>
          <div class="col-sm">
            Last Name: {{person.lastName}}
          </div>
        </div>
        <div class="row">
          <div class="col-sm">
            Middel Name: {{person.middleName}}
          </div>
          <div class="col-sm">
            Country of Birth: {{person.countryBirth}}
          </div>
        </div>
    </div>
</div>

Answer 5

<div *ngFor='let item of caseData'>
  <div *ngFor='let person of item.people'>
    <div class="row">
      <div class="col-sm">
        Name: {{person.name}}
      </div>
      <div class="col-sm">
        Last Name: {{person.lastName}}
      </div>
    </div>
    <div class="row">
      <div class="col-sm">
        Middel Name: {{person.middleName}}
      </div>
      <div class="col-sm">
        Country of Birth: {{person.countryBirth}}
      </div>
    </div>
  </div>
</div>