Angular 2 : click listener with *ngFor

标签 angular

我正在尝试创建一个组件列表并附加一个点击事件监听器来注册所点击组件的索引。

我可以通过在我的叶节点附加事件监听器来实现这一点,因为它知道它的索引。但随后我不得不将事件冒泡多次,而不是我可能需要的。我更愿意做的是在叶子的父级有以下内容:

  template: `
    <trackpoint
        *ngFor='#tp of lapData; #i=index'
        [tp]='tp'
        [index]='i'
        [ngClass]="{selected:selectedTps[i]}"
        (click)='handleClick($event)'>
    </trackpoint>
  `,

在我的 Controller 中

handleClick(e:MouseEvent) {
   console.log(e);
   this.lapEventHandler.next({
   // I want to be able to access i from the template
  });
}

我一直在检查 MouseEvent 对象,但虽然我可以在事件父对象中找到 Trackpoint,但我找不到 index 属性。我是不是在尝试做不可能的事情。

最佳答案

尝试

(click)='handleClick($event, i)

handleClick(e:MouseEvent, i: any)

关于 Angular 2 : click listener with *ngFor,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34785428/

相关文章:

twitter-bootstrap - ng2-bootstrap 中的 Typeahead 无法显示 Angular 2 中的项目

javascript - 将 Angular 8 开发工具更新到 15 开发工具后,调试器无法在浏览器开发工具上运行

html - Angular 绑定(bind)到文件输入字段的选择?

javascript - 纯 Javascript 作为 Angular 2 服务

Angular 配置或编译 JSON Assets

javascript - Ionic 无法打开 Cors

javascript - 将数据从模型提取到变量

html - Angular 8显示图像src存储为变量中的ng模型

Angular 6 : Observable<string[]> and isEmpty() operator

angular - ngFor 依赖于另一个 ngFor 来完成渲染 - 获取 ExpressionChangedAfterItHasBeenCheckedError [Angular 2]