*ngFor에서 동적 ID를 설정하는 방법은 무엇입니까?

*ngFor에서 동적 ID를 설정하는 방법은 무엇입니까?

동적 설정 방법idAngular 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"  }
];

하지만 효과가 없습니다.

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

이 기능도 작동합니다.

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

접두사를 추가하려면 "loc";

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

[]를 사용하면 값을 동적으로 추가하는 데 도움이 됩니다.

사용해 보십시오.

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

이것이 당신에게 효과가 있기를 바랍니다.StackOverflow를 검색했더니 이런 답이 나왔습니다.

인덱스를 동적 ID로 사용할 수 있습니다.

<div class="test" *ngFor="let item of data; let i = index">
<div class="function_div" (click)="test(i);">Test Button </div>
    {{item}}
</div>

일반적인 태그 대신 구성 요소 태그 내부id="#c"사용하다[id]="#c"이는 동적 클래스 이름에도 적용됩니다.아래 예를 참조하십시오.

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

언급URL : https://stackoverflow.com/questions/34568497/how-to-set-dynamic-id-in-ngfor