Как установить динамический идентификатор в * ngFor?

Как установить динамический id в Angular 2?

Я пытался:

<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"  }
];

Но это не работает.

Ответы

Ответ 1

<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>

~~Для атрибута id это может работать (еще не пробовал)~~

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

Забастовкa >

Ответ 2

Попробуй это:

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

Надеюсь, это будет работать для вас. Я искал StackOverflow, и я нашел этот ответ.

Ответ 3

Внутри тега компонента вместо обычного id="#c" используйте [id]="#c". Это также относится к динамическим именам классов. См. Пример ниже:

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