web-dev-qa-db-fra.com

Attribuer dynamiquement l'ID d'élément à l'intérieur de ngFor

Je suis nouveau sur Angular 2, et j'essaie de donner un identifiant attribué dynamiquement pour un div à l'intérieur d'un * ngFor. Je voudrais que les divs s'appellent 'wave1, wave2, wave3 ' etc.

<li *ngFor="let episode of episodes; let i = index">
    <div id="wave{{i}}"></div>
</li>

Cependant, cela génère l'erreur suivante:

ERROR DOMException: Failed to execute 'querySelector' on 'Document':
     '#wave[object Object]' is not a valid selector.

Je n'ai pas pu trouver de réponse à cela pour Angular 2 encore sur stackoverflow. Toutes mes excuses s'il s'agit d'un doublon

angularngfor
10
Tom O'Brien

Vous pouvez utiliser {{ 'wave' + i }} au lieu de wave{{i}}. Faites-le comme Angular Experession. Ceci est le ngFor complet:

<li *ngFor="let episode of episodes; let i = index">
     <div id="{{ 'wave' + i }}"></div>
</li>

Il fonctionne et crée le div avec le bon id

document.getElementById("wave1")

La sortie sera comme ceci:

<div id=​"wave1">​wave1​</div>

mais n'oubliez pas que votre code commencera par wave0 comme i = index commence à 0.

11
Hend Khalifa

Ce que vous avez est correct et devrait fonctionner dans angular 4/5. Utilisez-vous peut-être une version très ancienne, pré-release angular 2 version?

Voici un stackblitz avec votre code et le code ci-dessous, les deux fonctionnant

https://stackblitz.com/edit/angular-khur4v?file=app%2Fapp.component.html

Vous pouvez également le faire de cette façon, qui est la méthode préférée

<li *ngFor="let episode of episodes; let i = index">
    <div [attr.id]="'wave' + i">{{episode.name}}</div>
</li>
5
David

Vous n'avez pas besoin de définir i

<li *ngFor="let episode of episodes">
    <div id="wave{{episode}}">{{episode}}</div>
</li>

EDIT: dans le cas où les épisodes sont une liste d'objets

<li *ngFor="let episode of episodes">
    <div id="wave{{episodes.indexOf(episode)}}">{{episode.name}}</div>
</li>
2
bugs

Pour moi, cela fonctionne si j'ajoute des guillemets simples. Sinon Angular détecte une var.

<li *ngFor="let episode of episodes; let i = index">
    <div id="'wave' + i"></div>
</li>
2
Alex Seitz