angular - index - ¿Cómo configurar la identificación dinámica en*ngFor?

ngfor angular 6

Question

¿Cómo configurar la id dinámica en Angular 2?

Yo he tratado:

<div class = "CirclePoint" *ngFor="#c of circles" id = "{{ ''Location'' + c.id }}"></div>

this.circles = [
        { x: 50 , y: 50 ,id : "oyut1" },
        { x: 100 , y: 100 ,id : "oyut3"  },
        { x: 150 , y: 150 ,id : "oyut2"  }
];

Pero no funciona.

Answer 1

Dentro de la etiqueta del componente en lugar de la id="#c" habitual, use [id]="#c" . Esto también se aplica a los nombres de clase dinámicos. Ver ejemplo a continuación:

<div class = "CirlePoit" *ngFor="#c of circles" [id] = "#c"> </div>

Answer 2

Esto también funcionará:

<div class = "CirclePoint" *ngFor="let c of circles"> <div [id]="c.id"></div> </div>

Si desea agregar un prefijo, diga "loc";

<div class = "CirclePoint" *ngFor="let c of circles"> <div [id]="''loc'' + c.id"></div> </div>

Usar [] ayuda a agregar valores dinámicamente.

Answer 3

Prueba esto:

 <div class = "CirclePoint" *ngFor="let c of circles">
     <div id="location_{{c.id}}">write something which you want like c.x </div>
 </div>`

Se espera que esto funcione para usted. Busqué en y encontré esta answer .

Answer 4

<div class = "CirclePoint" *ngFor="let c of circles" 
    [attr.id]="''Location'' + c.id">
</div>

<div class = "CirclePoint" *ngFor="let c of circles" 
    attr.id="Location{{c.id}}">
</div>

Para el atributo id esto podría funcionar también (todavía no lo he probado)

<div class = "CirclePoint" *ngFor="let c of circles" 
[id]="''Location'' + c.id">
</div>