Angular5+ngx-leaflet标记点击始终触发最后一个元素问题求助

这是个典型的闭包作用域陷阱，和你使用var声明循环变量+箭头函数的组合直接相关：

• 用var声明的i作用域是整个函数，而非每次循环的块级作用域，所以所有点击事件的箭头函数都会捕获到同一个i的引用。当循环结束时，i指向的是this.list的最后一个元素，因此无论点击哪个标记，最终输出的都是最后一个元素。
• 而bindTooltip是直接拼接了当前i.name的字符串值，相当于把当时的i.name快照存了下来，所以tooltip能显示正确内容。

下面给你几个可行的修复方案，按推荐程度排序：

方案1：将var改为let（最简洁推荐） #

ES6的let声明的变量拥有块级作用域，每次循环迭代都会创建一个新的i绑定，每个箭头函数都会捕获到当前迭代的那个i：

for (let i of this.list) { 
  var markerItem = L.marker([i.lat, i.lng], {icon}) 
    .bindTooltip('<h5>'+i.name+'</h5>') 
    .on('click', () => { 
      console.log(i); 
      this.draw(i); 
    }); 
  data.push(markerItem) 
} 
this.markerClusterData = data;

方案2：使用立即执行函数（IIFE）创建独立作用域 #

如果因为某些场景不能使用let，可以用IIFE把每次迭代的i封装成独立作用域内的变量：

for (var i of this.list) { 
  // 用IIFE捕获当前迭代的i
  (function(currentItem) {
    var markerItem = L.marker([currentItem.lat, currentItem.lng], {icon}) 
      .bindTooltip('<h5>'+currentItem.name+'</h5>') 
      .on('click', () => { 
        console.log(currentItem); 
        this.draw(currentItem); 
      }); 
    data.push(markerItem);
  })(i);
} 
this.markerClusterData = data;

方案3：通过bind传递参数 #

可以用普通函数配合bind，把当前的i作为参数绑定到点击事件函数中，同时还能保证this指向正确：

for (var i of this.list) { 
  var markerItem = L.marker([i.lat, i.lng], {icon}) 
    .bindTooltip('<h5>'+i.name+'</h5>') 
    .on('click', function(currentItem) { 
      console.log(currentItem); 
      this.draw(currentItem); 
    }.bind(this, i)); // 绑定this和当前的i
  data.push(markerItem) 
} 
this.markerClusterData = data;

推荐优先用方案1，这是现代JS/TS项目解决这类问题的标准方式，代码简洁且符合语言设计的初衷。

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