Почему моя кнопка в всплывающем окне Leaflet не работает? - PullRequest
Новая
       22

Почему моя кнопка в всплывающем окне Leaflet не работает?

0 голосов
/ 24 января 2019

У меня есть листовка с множеством маркеров, при нажатии на которые появляется некоторая информация с кнопкой редактирования и удаления!По какой-то причине листовка, кажется, маскирует эти кнопки, так или иначе, они просто не будут работать.

вот мой компонент карты с маркерами и всплывающими окнами: 

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

Я нажимаю на кнопку, и ничего не происходит, в консоли тоже ничего не отображается.

Ответы [ 2 ]

0 голосов
/ 09 июля 2019

Кто-то может найти это полезным, я столкнулся с той же проблемой, я исправил ее методом 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");
}
0 голосов
/ 25 января 2019

Ваша кнопка не работает, потому что вы пытаетесь вызвать метод, который находится практически в строке 

 "<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") в сочетании с elementRef angular, как в следующем примере: 

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

Демо

...