2016-01-02 13 views
37

Wie setze ich dynamische ID in angular2?Wie setze ich dynamische ID (* ngFor) in ionic2/angular2?

Ich habe

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

, aber es funktioniert nicht.

Antwort

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

Für die id führen dies könnte genauso gut funktionieren (nicht versucht, mich noch)

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

+1

Vielen Dank. [attr.id] funktioniert, aber [id] funktioniert nicht. –

+0

Danke für das Feedback, ich dachte, es gab ein paar gemeinsame Attribute mit spezieller Behandlung, aber vielleicht habe ich etwas durcheinander gebracht. –

+0

Genau das, was ich gesucht habe. So viele verschiedene Wege da draußen, und der richtige Weg scheint sich zu ändern, wenn sich Winkel 2 verändert, scheint es? – John

2

Try this:

<div class = "CirclePoint" *ng-for="#c in circles"> 
    <div id="location_{{c.id}}">write something which you want like c.x </div> 
</div>` 

Hoffentlich wird für Sie arbeiten. Ich suchte StackOverflow und ich fand diese answer.

+0

Vielen Dank für Ihre Antwort. Aber ich arbeite an angular2 "ng-attr-id" funktioniert nicht mehr. –

+0

sorry, ich arbeite nicht in angular2 ohne see Tag, ich antworte dir.Ich habe eine Antwort aus dem Netz gefunden –

0

Im Inneren des Komponententag statt der üblichen id="#c" Verwendung [id]="#c". Dies gilt auch für dynamische Klassennamen. Siehe Beispiel unten:

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