Question

我有一个带有很多标记的传单地图，单击它们会显示一些信息，并带有编辑和删除按钮！但是由于某种原因，传单似乎掩盖了这些按钮，无论哪种方式它们都不起作用。

这是我的带有标记和弹出窗口的地图组件：

refresh() {
    this.artworkService.retrieveAll().then((artworkList) => {
      this.artworkList = artworkList;
      for (let artwork of this.artworkList) {
        const popupOptions = { className: "customPopup" };
       const popupContent =
          "<span class='customPopup'><b>" +
          artwork.name +
          "</b></span>" +
          "<br/>" +
          artwork.filename +
           "<br/>" +
          artwork.firstname + " " + artwork.lastname +
          "<br/>" +
          artwork.streetname + artwork.streetnumber + ", " + artwork.zipcode +
          "<br/>" +
          "<button (click)='editArtwork()'><i class='fa fa-edit mr-1></i></button>" + "<i class='fa fa-trash ml-1 (click)='deleteArtwork()'></i>";
    console.log(artwork.name);
        L.marker([artwork.latitude, artwork.longitude], this.markerIcon)
          .addTo(this.map)
          .bindPopup(popupContent, popupOptions);
      }
   });
}

editArtwork() {
  alert("editing");
}

deleteArtwork() {
  alert("deleteing");
}

我单击按钮，但没有任何反应，控制台中也没有任何显示。

Answer 1

您的按钮不起作用，因为您正在尝试调用实际上位于字符串中的方法

 "<button (click)='editArtwork()'><i class='fa fa-edit mr-1></i></button>" + "<i class='fa fa-trash ml-1 (click)='deleteArtwork()'></i>";

是分配给非html变量的字符串，这是方法调用不起作用的原因。

不确定这是否是最好的方法，但是一种方法是： 1.为每个按钮分配一个唯一的类 2.将on（“ popupopen”）事件处理程序与angular的elementRef结合使用，如以下示例所示：

const popupOptions = {
  className: "customPopup"
};
const _this = this;

for (let artwork of this.artworkList) {
  const popupInfo = `
  ${artwork.name} <br> ${
    artwork.filename
  } <br> <button class="edit">Edit</button>
  <br> <button class="delete">Delete</button>
  `;
  L.marker([artwork.latitude, artwork.longitude], this.markerIcon)
    .addTo(this.map)
    .bindPopup(popupInfo, popupOptions)
    .on("popupopen", () => {
      _this.elementRef.nativeElement
        .querySelector(".edit")
        .addEventListener("click", e => {
          _this.editArtwork();
        });
    })
    .on("popupopen", () => {
      _this.elementRef.nativeElement
        .querySelector(".delete")
        .addEventListener("click", e => {
          _this.deleteArtwork();
        });
    });
}



editArtwork() {
  alert("editing");
}

deleteArtwork() {
  alert("deleting");
}

Demo

Answer 2

有人可能会发现这很有用，我遇到了同样的问题，我用getPopup方法修复了该问题，因为我的ElemenRef.NativeElement无法找到分配事件的元素，

for (let artwork of this.artworkList) {
  const popupInfo = `
  ${artwork.name} <br> ${
    artwork.filename
  } <br> <button class="edit">Edit</button>
  <br> <button class="delete">Delete</button>
  `;
  L.marker([artwork.latitude, artwork.longitude], this.markerIcon)
    .addTo(this.map)
    .bindPopup(popupInfo, popupOptions)
    .on("popupopen", (a) => {
         var popUp = a.target.getPopup()
         popUp.getElement()
        .querySelector(".edit")
        .addEventListener("click", e => {
          _this.editArtwork();
        });
    })    
}



editArtwork() {
  alert("editing");
}

为什么我的Leaflet弹出窗口中的按钮不起作用？

2 个答案: