访问NgFor循环中的元素

时间:2016-05-12 21:33:23

标签: angular angular2-template

我的模板包含动态列表:

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

我希望在用户点击它时更改项目的CSS类。我已尝试使用MouseEvent的属性,例如targetcurrentTarget,但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。有什么想法吗?

由于

1 个答案:

答案 0 :(得分:5)

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

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

这段代码有效:

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

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