Ce problème me rend fou. Mon ami a du code et quand il utilise Quand j'essaie de le faire, il sort J'ai essayé de déboguer le code Et le problème est que la boucle ne trouve pas les propriétés. P> Composant d'élément de l'utilisateur de l'utilisateur: strong> p> * ngfor code> et boucle, il est capable de trouver les propriétés de son objet. Il utilise un tableau contenant un objet comme je le fais comme si je fais. non défini code>. P> <ul>
<li *ngFor= "let field of fields">
<app-user-item [fields] = "field"> </app-user-item>
</li>
</ul>
5 Réponses :
Ajoutez les modifications suivantes à vos fichiers
<!-- Add Curly Braces -->
<h1>{{fields.name}}</h1>
<h1>{{fields.destination}}</h1>
Veuillez vérifier le code à nouveau, j'ai ajouté tout le code maintenant afin qu'il aura plus de sens.
Veuillez vérifier ce lien Stackblitz.com/edit/angular-Ctvju1 . C'est fondamentalement une pâte de copie de ma réponse ici et cela fonctionne bien.
Savez-vous ce qui l'a causant d'être indéfini avant? Parce que mon ami l'avait dactylographié des champs d'entrée (): chaîne []; et cela a fonctionné. Étais-je la définition de manière incorrecte dans les documents?
Oui comme clairement ce n'est pas un tableau de chaînes Il s'agit d'une gamme d'objets avec nom de propriétés et destination
Vous avez manqué les bretelles à double frisage pour une interpolation à chaîne - doit être comme celle-ci -
{{fields.destination}}
Vous pouvez utiliser le code ci-dessous
p>
/*template func3.component.html */
<div class="container">
<box-func4 [dataName]="dataObject"></box-func4>
</div>
/*template func4.component.html */
<div class="row">
<div class="col-md-4" *ngFor="let item of dataName">
<h2>{{item.name}}</h2>
<img [src]="item.image" style="width: 100%"/>
</div>
</div>
Le problème est que vous avez manqué des accolades frisées ( et {{champs.name}} & {{champs.destination}} ) comme chaque fois que tout le monde a répondu.
Et cela fonctionnera mais votre entrée n'est pas un tableau de chaîne ( string [] ) son objet que vous insérez dans l'élément élément utilisateur-utilisateur composant de ngfor .
C'est bon de le changer en
Mais l'objet est contenu dans un tableau. Considéreriez-vous cela un tableau qui abrite un objet?
Les champs sont un tableau d'objets ( {nom: chaîne, destination: chaîne} [] ). Donc, lorsque nous en bougeons * ngfor = "Laissez le champ des champs" Le champ sera un objet ( {nom: chaîne, destination: chaîne} ).
j'ai changé votre utilisateur-itemPonent.html comme et user-item.component.ts j'ai fait Stackblitz pour votre aide.
Pouvez-vous partager le composant et le modèle d'objet de l'utilisateur?
Juste mis à jour, laissez-moi savoir si cela suffit.
J'ai ajouté tout le code maintenant, je reçois un indéfini pour les champs.name et champs.Destination, mais si j'étère seulement avec {{champs}}, j'ai une boucle d'objet "objet d'objet"
@ NE0
console.log ('champs:', this.fields) dans votreNgonchanges deApp-User-Item et voyez quand votre enfant Le composant est initialisé Il a une valeur du composant parent ou non? Il peut s'agir d'une question de détection de changement angulaire.