J'ai une propriété dans un composant nommé chaque société a une liste de mais quand je récupère des données ( dans le modèle du composant, je souhaite créer un Cependant, je reçois une erreur dans la console: Erreur TypeError: Impossible de lire les «produits» de la propriété non définie
La liste des entreprises affiche OK, mais sans les produits connexes de la société. Ma question est, comment coder le code sociétés : produits : société avec produits ), la liste n'a pas Un type ( produit est objet maintenant). imbriqué * ngfor comme Ceci:
* ngfor correctement à Obtenez ces produits (liés aux entreprises) dans le modèle de mon composant?
3 Réponses :
Laisser le produit de la société.Products
Modifier
Désolé, je n'ai pas remarqué que la seconde NGFOR n'était pas sous la NGFOR extérieure. Je ne suis pas entièrement sûr dans le matériel angulaire, mais je vais jeter un coup d'œil rapide rapidement et vous laisser savoir si j'ai une bonne solution pour vous
Modifier
Vous souhaitez mettre votre NGAUR dans le panneau d'extension de tapis, non dans l'en-tête du panneau d'extension de tapis. puis laissez le produit de la société.Products
Ne fonctionne pas, désolé. Toujours indéfini. Je n'ai pas marqué votre réponse, idk qui fait ça
Pas de soucis, certaines personnes font ça :-) J'ai mis à jour ma réponse
Si vous ne voulez pas perdre de représentant, supprimez-le
Ou, lorsque mon édition vous permet de répondre à la question, mettez-vous à jour le Downvote?
MDR. Apprécié. J'ai eu lieu ici depuis longtemps et j'ai finalement décidé de poster un peu, mais il se sentait un peu ... hostile? Les gens réclament vraiment le représentant, je suppose
Vous devez nier * ngfor code> s. Sociétés CODE> est un tableau et n'a pas produits code> propriété mais société code> fait. Et veuillez noter que j'ai déplacé le premier * ngfor code> de la balise en-tête du panneau à la balise du panneau. <mat-expansion-panel *ngFor="let company of companies">
<mat-expansion-panel-header>
<mat-panel-title>{{ company.name }}</mat-panel-title>
</mat-expansion-panel-header>
<mat-selection-list>
<mat-list-item *ngFor="let product of company.products">
{{ product.name }}
</mat-list-item>
</mat-selection-list>
</mat-expansion-panel>
Comme chaque entreprise dispose de produits, vous devez énumérer les produits au niveau de la société. Votre HTML aurait alors besoin d'être imbriqué de sorte que société code> a une portée lorsque vous récupérez les produits. <mat-expansion-panel *ngFor="let company of companies">
<mat-expansion-panel-header>
<mat-panel-title>{{ company.name }}</mat-panel-title>
</mat-expansion-panel-header>
<mat-selection-list>
<mat-list-item *ngFor="let product of company.products">
{{ product.name }}
</mat-list-item>
</mat-selection-list>
</mat-expansion-panel>