web-dev-qa-db-ja.com

* ngForで動的IDを設定する方法は？

Angular 2に動的idを設定する方法は？

私が試してみました：

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

しかし、それは機能しません。

angularionic2
55
Kim Wong
<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>
98
Günter Zöchbauer

これを試して：

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

うまくいけば、これはあなたのために働くでしょう。 StackOverflowを検索しましたが、これを見つけました answer 。

2
Vipin Jain

通常のid="#c"の代わりにコンポーネントタグ内で[id]="#c"を使用します。これは、動的クラス名にも適用されます。以下の例を参照してください。

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