J'ai un tableau d'objets ( list: any [] ) que j'utilise dans une expression * ngFor . Est-il possible d'afficher l'une des propriétés de l'objet lorsque je connais le nom de la propriété au moment de l'exécution?
Je crée un composant, appelé ListComponent qui affiche une liste d'éléments. Le composant parent appelé ParentComponent , passera dans le tableau d'objets et la propriété qu'il veut que le ListComponent affiche dans la liste.
Voici ce que j'ai jusqu'à présent dans le ListComponent:
<div>
<div class="item" *ngFor="let item of itemList">{{item.name}}</div>
</div>
Au lieu de {{item.name}} , est-il possible de dynamiser la partie .name et d'utiliser la propriété transmise par ParentComponent ?
3 Réponses :
essayez avec le code ci-dessous. ici le nom est une variable qui peut être dynamique à partir du composant.
<div>
<div class="item" *ngFor="let item of itemList">{{item[name]}}</div>
</div>
Vous pouvez créer une variable «dynamicKey» dans votre .ts qui change et y accéder comme ci-dessous. Vous pouvez également éventuellement fournir une chaîne par défaut ou vide pour le cas où elle n'est pas définie.
dynamicArray = itemList.map(item => item[dynamicKey])
<div>
<div class="item" *ngFor="let item of dynamicArray">{{item}}</div>
</div>
Une autre approche peut être de créer un tableau à partir de l'objet basé sur votre clé dynamique, pour réduire la logique dans le modèles.
<div>
<div class="item" *ngFor="let item of itemList">{{item[dynamicKey] || ''}}</div>
</div>
c'est super merci. je pense que je vais travailler. je vais essayer de vous faire savoir.
https://stackblitz.com/edit/angular-fakfmp? file = src / app / app.component.html
Pouvez-vous donner un exemple de ce que vous voulez faire? Je ne comprends pas la partie dynamique .name. Si votre item.name change, il mettra également à jour le ListComponent