传单标记点击总是显示最后一个元素

Question

我正在使用 Angular 5 和 ngx 传单，包括标记簇。一切正常，但点击功能总是输出列表最后一个元素的名称，而工具提示包含正确的名称。

for (var 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;

Answer 1

您可以更改：

.on('click', () => {
  console.log(i);
  this.draw(i);
}

收件人：

.on('click', ((i) => () => {
  console.log(i);
})(i))

上面的解决方案使用了闭包。您可以阅读更多关于它们的信息 here.

你也可以改变

for (var i  of this.list) {

到

for (let i  of this.list) {

此解决方案利用了 let keyword。

查看 this JSBin 以查看工作示例。

传单标记点击总是显示最后一个元素

Leaflet marker click always shows last element

angular

leaflet

leaflet.markercluster

ngx-leaflet