angular - 在 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 没有提供访问类(class)列表。所以我尝试获取列表元素作为 View 子元素:

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

这也行不通。在事件处理程序中， native 元素未定义:

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

我得到的错误是:无法读取未定义的属性“nativeElement”。有什么想法吗？

谢谢

Answer 1

除非使用 toArray，否则无法使用数组表示法访问 QueryList 的元素。所以这段代码失败了:

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

这段代码有效:

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

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