在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); 

疯狂。如果有人知道更好的方法，请告诉我。