Mi JavaScript:
this.items = [ {name: 'Amsterdam1', id: '1'}, {name: 'Amsterdam2', id: '2'}, {name: 'Amsterdam3', id: '3'} ];Mi HTML:
<ul> <li *ngFor="#item of items" id={{item.id}}> {{ item.name}} </li> </ul>Quiero asignar una identificación dinámica a cada elemento, pero no puedo hacer que funcione. Aparece el nombre pero no el id.
la forma en que dijiste funciona, Angular 2.0.0.beta.8.
en este caso se puede utilizar por ejemplo:
[id]="item.id"[attr.id]="item.id" id={{item.id}}
<ul> <li *ngFor="#item of items" #elem [id]="item.id"> {{ item.name}} ID: {{elem.id}} </li> </ul> <ul> <li *ngFor="#item of items" #elem [attr.id]="item.id"> {{ item.name}} ID: {{elem.id}} </li> </ul> <ul> <li *ngFor="#item of items" #elem id={{item.id}}> {{ item.name}} ID: {{elem.id}} </li> </ul>Puede consultar aquí para obtener más información sobre la sintaxis de la plantilla.
Todos los métodos proporcionados por @AngelAngel son correctos, pero solo para explicar por qué usar [attr.id] publicado como respuesta.
Angular por defecto usa property binding . Para decirle a Angular explícitamente que use el enlace de atributos, usamos en su lugar:
<ul> <li *ngFor="#item of items" #elem [attr.id]="item.id"> {{ item.name}} ID: {{elem.id}} </li> </ul> Con attr.id , debe optar explícitamente por el enlace de atributos porque el enlace de atributos es costoso. Los atributos se reflejan en el DOM y los cambios requieren, por ejemplo, verificar si los selectores de CSS están registrados y coinciden con este conjunto de atributos. El enlace de propiedad es solo JS y económico, por lo tanto, el valor predeterminado.
<ul> <li *ngFor="#item of items" attr.id={{item.name}}> {{ item.name}} </li> </ul>Esto debería funcionar (funcionó para mí en angular2).