在NgFor循環

Question

我的模板中包含的動態列表訪問元素：

<ol> 
    <li #nameitem *ngFor="let name of names; let i = index" class="classA"  
     (click)="handleClick(i)">{{ name }}</li> 
</ol> 

我想更改項目的CSS類，當用戶點擊它。我試過使用MouseEvent的屬性，如target和currentTarget，但EventTarget不提供對類列表的訪問。所以我試圖獲得列表元素作爲查看兒童：

@ViewChildren("nameitem") private nameItems: QueryList<ElementRef>; 

這也不起作用。在事件處理程序，本土元素是不確定的：

private handleClick(i: number) { 
    console.log(this.nameItems[i].nativeElement.classList.length); 
} 

我得到的錯誤是：Cannot read property "nativeElement" of undefined。有什麼想法嗎？

由於

Answer 1

甲QueryList的元件可以除非使用toArray不能使用數組方式訪問。所以這個代碼失敗：

console.log(this.nameItems[i].nativeElement.classList.length); 

而且此代碼的​​工作：

console.log(this.nameItems.toArray()[i].nativeElement.classList.length); 

瘋狂。如果有人知道更好的方法，請告訴我。