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

refresh（）{
this.artworkService.retrieveAll（）。然后（（artworkList）=>{
this.artworkList=artworkList；
for（让我们看看这个artworkList的艺术品）{
const popupOptions={className:“customPopup”}；
常量弹出内容=
"" +
artwork.name+
"" +
“
”+
artwork.filename+
“
”+
artwork.firstname+“”+artwork.lastname+
“
”+
artwork.streetname+artwork.streetnumber+“，”+artwork.zipcode+
“
”+
"";
console.log（artwork.name）；
L.标记（[artwork.latitude，artwork.latitude]，this.markerIcon）
.addTo（此.map）
.bindPopup（popupContent、popupOptions）；
}
});
}
编辑图（）{
警报（“编辑”）；
}
删除艺术品（）{
警告（“删除”）；
}

---

我点击按钮，什么也没有发生，控制台也没有显示

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

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

---

有人可能会觉得这很有用，我也遇到了同样的问题，我用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");
}

for（让我们看看这个.artworkList的艺术品）{
常量popupInfo=`
${artwork.name}
${
artwork.filename
}
编辑

删除
`;
L.标记（[artwork.latitude，artwork.latitude]，this.markerIcon）
.addTo（此.map）
.bindPopup（popupInfo、popupOptions）
.on（“popupopen”，（a）=>{
var popUp=a.target.getPopup（）
popUp.getElement（）
.querySelector（“.edit”）
.addEventListener（“单击”，e=>{
_这个.editArtwork（）；
});
})    
}
编辑图（）{
警报（“编辑”）；
}

您能简要解释一下“const\u this=this；”的意义吗？非常感谢！实际上，由于使用了es6，您可以忽略它并使用

this

而不是

\u this

。如果您不使用es6，您将需要它，因为

const\u this=this

保留类AppComponent的引用，以便能够访问嵌套范围内的私有变量

elementRef

或任何其他公共或私有组件变量（函数中的for循环中的函数）。由于该的作用域在addEventListener函数中发生了更改，它将丢失对类的引用并变得未定义。但由于使用了es6，它的工作与使用

const\u 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", (a) => {
         var popUp = a.target.getPopup()
         popUp.getElement()
        .querySelector(".edit")
        .addEventListener("click", e => {
          _this.editArtwork();
        });
    })    
}



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