Referenzieren Element Attribute von generierten li in Angular4

Question

Ich habe eine einfache Todo-Liste mit *ngFor generiert, und ich versuche, li 's offsetTop Wert zu bekommen. Ich kann das für das erste generierte li gut machen, aber ich muss in der Lage sein, eine Variable auf jedes der li und ihrer Attribute zu setzen. Gibt es eine Form der Indexierung, die ich mit Vorlagenvariablen verwenden kann, um einen "This" -Effekt zu erzielen?

Meine Vorlage:

<li class="search-item" #todoli 
    *ngFor="let todoItem of todos; let item=index " 
    (click)="selectTodo($event, todoItem)" 
> 
    <span class="todo-item">{{ todoItem.name }}</span> 
    <span class="delet-todo" (click)="deleteTodo(item)">&#10005;</span> 
</li> 

Meine Komponente TS (auf den Code, der das Verkürzte @ViewChild Ziel verwendet):

li: any; 

    @ViewChild("todoli") 
    todoli; 

    selectTodo(event, i) { 
    this.selectedItem = i; 
    this.li = this.todoli.nativeElement; 
    console.log(this.li.offsetTop); 
    } 

Answer 1

Sie können es auch tun, ohne ViewChild/ViewChildren Referenzen:

<li class="search-item" #todoli 
    *ngFor="let todoItem of todos; let item=index " 
    (click)="selectTodo($event, todoItem, todoli)" 
> 


selectTodo(event, i, todoli) { 
    this.selectedItem = i; 
    this.li = todoli; 
    console.log(this.li.offsetTop); 
} 

Stackblitz Example

oder ein Ereignis ohne Vorlage Referenzgröße durch event.target/currentTarget

<li class="search-item" 
    *ngFor="let todoItem of todos; let item=index " 
    (click)="selectTodo($event, todoItem)" 
> 


selectTodo(event, i) { 
    this.selectedItem = i; 
    this.li = event.target; 
    console.log(this.li.offsetTop); 
} 

Stackblitz Example

Answer 2

ViewChild soll ein einzelnes Kind abzufragen. ViewChildren sollte die Abfrage mehrere Kinder verwendet werden:

@ViewChildren("todoli") 
    todolis: QueryList<any>; 

Wo todoli Vorlage Variablenname, und todolis ist QueryList Objekt.