Dev Faq
0
votes

Pour afficher les objets d'un tableau à l'aide de boucles

J'ai une matrice appelée adresses qui contient plusieurs objets à l'intérieur (I, EXIME multiple). XXX

PIC DE REFERENCE :

Entrez la description de l'image ici

Je veux Afficher toutes les adresses en fonction du nombre d'objets présents (i, e non / Type d'adresse).

Je suis capable d'afficher l'adresse multiple à l'aide de la position Objets d'objets , mais je veux afficher par boucle . .

Stackblitz Demo

1 commentaires

Sur adresse td Vous pouvez appeler une boucle intérieure comme celle-ci. {{cd.addressypetype}}

3 Réponses :

1
votes

Vous pouvez faire une boucle via l'adresse: 

<td *ngFor="let abc of contact.addresses">
    {{abc.addressType}} 
</td>

4 commentaires

Je reçois cette erreur: Error TypeError: Impossible de lire les «adresses» de la propriété d'indéfinie

Vous devriez attendre votre premier NGFOR chargé. Vous pouvez l'envelopper à l'intérieur de ngif E.g:

Obtenu cette erreur: ne peut pas avoir plusieurs liaisons de modèle sur un élément

Essayez ceci * ngif = "contact! = non défini" sur votre balise d'adresse.

1
votes 
<div class="cust-detail" *ngFor="let contact of contacts">
    <tr>
      <td>Name</td>
      <td>{{contact.name }}</td>
    </tr>
    <tr>
      <td>Gender</td>
      <td>{{contact.gender}} </td>
    </tr>
    <tr>
      <td>Address</td>
      <td>
        <div *ngFor="let addr of contact.addresses">
            {{addr.street}},
            {{addr.city}},
            {{addr.country}},
            {{addr.state}},
            {{addr.postalCode}} ({{addr.addressType}})
        </div>
      </td>
    </tr>
    <hr>
</div>
7 commentaires

Votre solution fonctionne bien, mais quand j'ai essayé avec ma candidature, je reçois cette erreur: Error TypeError: Impossible de lire les «adresses» de la propriété d'indéfinie

Avez-vous initialisé la variable? Ca peut être le problème.

YA, j'ai initialisé la variable.

Je ne pouvais voir d'initialiser en démo.

Dans la démonstration, je n'ai pas initialisé, j'ai initialisé dans mon app .

Comme ça? ngoninit () {ceci.contacts = []; }

Laissez-nous Continuez cette discussion en chat .

1
votes

Essayez ceci, c'est comme la structure que vous souhaitez avec indexation directe: xxx

https://stackblitz.com/edit/angular-movie-read-lopload-json-sample -Eg-dmhidj? File = src / app / app.component.html

6 commentaires

Je reçois cette erreur: Error TypeError: Impossible de lire les «adresses» de la propriété d'indéfinie

@Empty_soul: manquez-vous l'opérateur de navigation sécurisé (? ) quelque part dans votre code?

@Empty_soul: Vous ne voulez pas dire que vous obtenez l'erreur dans l'exemple Stackblitz, non?

J'ai utilisé la navigation sûre (?) , la question toujours est là.

Je ne reçois aucune erreur dans Stackblitz .

@Empty_soul: recherchez la chaîne "'.Addresses'" soit dans votre html ou .ts Vous trouverez une instance. Si c'est dans .ts alors vous devez faire quelque chose comme: si (quelque chose) alors quelque chose.Addresses , pour "HTML", la navigation sécurisée fera

Articles qui pourrait vous intéresser :

Erreur de compilation angulaire: NG6001: la classe est répertoriée dans les déclarations du NgModule 'AppModule', mais n'est pas une directive, un composant ou un tube
Changer le format numérique du champ d'entrée dans le mode d'édition de ligne de table d'Antd?
La description n'est pas une exception définie sur Typescript, Mocha et VSCode
Impossible de trouver le module défini dans tsconfig `chemins`