时间戳

首页 > 解决方案 > 为什么我在传单弹出窗口中的按钮不起作用？

angular - 为什么我在传单弹出窗口中的按钮不起作用？

问题描述

我有一张带有很多标记的传单地图，当它们被点击时，一些信息会出现一个编辑和删除按钮！但是由于某种原因，传单似乎掩盖了这些按钮，无论哪种方式它们都无法正常工作。

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

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");
}

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

标签： angulartypescriptleafletpopup

解决方案

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

 "<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");
}

演示

推荐阅读