如何将Angular 5的ngFor索引变量传递给组件方法？

嘿，我一眼就瞅出问题所在啦！你在(click)事件绑定里多套了一层双大括号{{}}，这在Angular的模板语法里是完全错误的操作，直接导致了报错。

错误原因 #

Angular的事件绑定（也就是(click)这类括号包裹的部分）本身就处于表达式上下文中，模板里的变量（比如这里的i）可以直接被引用，不需要再用插值语法（双大括号）去解析它。

修正后的代码 #

把事件绑定里的{{i}}改成直接写i就搞定了：

<img *ngFor="let img of images; let i = index" [src]="img" alt="{{i}}" (click)="doSomething(i)">

另外小提一句：src属性用Angular的属性绑定语法[src]="img"比插值src="{{img}}"更规范，也更符合Angular的最佳实践哦～

额外扩展 #

如果你的业务逻辑需要同时用到图片对象和索引，也可以一次性传递两个参数：

<img *ngFor="let img of images; let i = index" [src]="img" alt="{{i}}" (click)="doSomething(i, img)">

对应的组件方法就可以这样定义：

doSomething(index: number, image: string): void {
  // 这里就能拿到索引和图片地址啦
  console.log('索引：', index, '图片地址：', image);
}

内容的提问来源于stack exchange，提问作者Kingsley