访问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);

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