Verweis auf einzelne generierte Komponenten von ngFor

Question

Ich habe eine angular2 Komponente, die ich unten enthalten habe. Ich erzeuge eine Liste von chapters, die ich dann mit einem *ngFor=-Tag anzeigen, aber ich möchte in der Lage sein, diese in meiner ng2-Komponente individuell anzusprechen (damit ich das ausgewählte Kapitel hervorheben kann). Ich würde der folgende Code so etwas wie dies würde erzeugen Denk:

<p class="chapter 1" #1>1. My First Chapter</p> 

Aber ich habe nicht das # 1, daher ist mein Wähler nicht funktioniert und ich kann nicht standardmäßig das erste Kapitel die Liste, die ausgewählt werden soll.

Was kann ich tun, um meine generierten <p> Tags individuell auswählen zu können?

Answer 1

Für Sie Fall verwenden könnte dies eine im Winkel Weise

<p *ngFor="let chapter of chapters; let i=index" (click)="clickedItem = i" [class.clicked]="i == clickedItem" class="chapter" #{{chapter.number}}>{{chapter.number}}. {{chapter.title}}</p> 

export class bookComponent implements AfterViewInit { 
    public chapters = _chapters; 
    clickedItem: number; 
} 

sein

Das Aktualisieren des Modells und das Binden der Ansicht, damit Angular das Modell in der Ansicht widerspiegelt, ist der bevorzugte Weg, anstatt das DOM unbedingt zu ändern.

Answer 2

würde ich die NgFor lassen Regel das Hinzufügen oder die clicked Klasse zu entfernen:

<p *ngFor="let chapter of chapters" class="chapter" 
    [class.clicked]="chapter.number === selectedChapterNumber"> 
    {{chapter.number}}. {{chapter.title}} 
</p> 

Dann setzen nur selectedChapterNumber entsprechend in Ihrer Komponente Logik.

export class bookComponent { 
    public chapters = _chapters; 
    private selectedChapterNumber = 1; 
} 

Answer 3

Sie könnenRichtlinie mit HostListener zu wählen Sie ein Element verwenden, wie unten dargestellt.

Arbeits Demo: http://plnkr.co/edit/mtmCKg7kPgZoerqT0UIO?p=preview

import {Directive, Attribute,ElementRef,Renderer,Input,HostListener} from '@angular/core'; 

@Directive({ 
    selector: '[myAttr]' 
}) 

export class myDir { 
    constructor(private el:ElementRef,private rd: Renderer){ 
     console.log('fired'); 
     console.log(el.nativeElement); 
    } 

    @HostListener('click', ['$event.target']) 
    onClick(btn) { 
     if(this.el.nativeElement.className=="selected"){ 
      this.el.nativeElement.className =""; 
     }else{ 
      this.el.nativeElement.className ="selected"; 
     } 
    } 
} 

---

//our root app component 
import {Component} from '@angular/core'; 

@Component({ 
    selector: 'my-app', 
    directives:[myDir], 
    template: 
    ` 
    <style> 
    .selected{ 
     color:red; 
     background:yellow; 
    } 
    </style> 
    <div class="content row"> 
    <div class="chapters col s3"> 
     <h3>Chapters:</h3> 
     <p myAttr *ngFor="let chapter of chapters" class="chapter" #{{chapter.number}}>{{chapter.number}}. {{chapter.title}}</p> 
    </div> 
</div> 
    ` 
}) 
export class App { 
    chapters=[{number:1,title:"chapter1"},{number:2,title:"chapter2"},{number:3,title:"chapter3"}] 


}