Wie setze ich die dynamische ID in * ngFor?

70

Wie stelle idich die Dynamik in Angular 2 ein?

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.

angular ionic2

— Kim Wong
quelle

124

<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 das idAttribut könnte dies auch funktionieren (habe ich noch nicht ausprobiert)~~

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

— Günter Zöchbauer
quelle

Vielen Dank für das Feedback, ich dachte, es gibt ein paar gemeinsame Attribute mit besonderer Behandlung, aber vielleicht habe ich etwas durcheinander gebracht.

— Günter Zöchbauer

5

Dies wird auch funktionieren:

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

Wenn Sie ein Präfix hinzufügen möchten, sagen Sie "loc".

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

Mit [] können Sie Werte dynamisch hinzufügen.

— NeenuChandran
quelle

4

Versuche dies:

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

Hoffentlich funktioniert das für Sie. Ich habe StackOverflow durchsucht und diese Antwort gefunden .

— Vipin Jain
quelle

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

— Kim Wong

Entschuldigung, ich arbeite nicht in angle2 ohne see tag, ich antworte dir. Ich habe eine Antwort von net gefunden

— Vipin Jain

0

Innerhalb des Komponenten-Tags anstelle 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>

— Norman Pilusa
quelle