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

我有一张带有很多标记的传单地图，当单击它们时，会出现一些带有编辑和删除按钮的信息！然而，出于某种原因，传单似乎掩盖了这些按钮，无论哪种方式，它们根本不起作用。

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

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

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

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

 "<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 https://codesandbox.io/s/l3l468y5w7