Estoy tratando de dar una identificación asignada dinámicamente para un div dentro de * ngFor. Me gustaría que los divs se llamaran 'wave1, wave2, wave3', etc.
<li *ngFor="let episode of episodes; let i = index"> <div id="wave{{i}}"></div> </li>Sin embargo, esto arroja el siguiente error:
ERROR DOMException: No se pudo ejecutar 'querySelector' en 'Documento': '#wave[object Object]' no es un selector válido.
Puedes usar {{ 'wave' + i }} en lugar de wave{{i}} . Hazlo como Angular Experession. Este es el ngFor completo:
<li *ngFor="let episode of episodes; let i = index"> <div id="{{ 'wave' + i }}"></div> </li> Funciona y crea el div con la id correcta
document.getElementById("wave1")La salida será así:
<div id="wave1">wave1</div> pero recuerde que su código comenzará desde wave0 ya que i = index comienza desde 0.
Lo que tienes es correcto y debería funcionar en angular 4/5. ¿Quizás estás usando una versión angular 2 de prelanzamiento muy antigua?
Aquí hay un stackblitz con su código y el código a continuación, ambos funcionan
https://stackblitz.com/edit/angular-khur4v?file=app%2Fapp.component.html
También puede hacerlo de esa manera, que es la forma preferida
<li *ngFor="let episode of episodes; let i = index"> <div [attr.id]="'wave' + i">{{episode.name}}</div> </li>No es necesario definir i
<li *ngFor="let episode of episodes"> <div id="wave{{episode}}">{{episode}}</div> </li>EDITAR: en caso de que los episodios sean una lista de objetos
<li *ngFor="let episode of episodes"> <div id="wave{{episodes.indexOf(episode)}}">{{episode.name}}</div> </li>