Angular 用于小叶标记的角形过滤管

我有一个select，叫做district，它列出了城市的所有地区

目标是在选择地区时应用过滤器，该过滤器最终将仅显示地图上相关地区的传单标记。你知道我怎样才能做到吗

以下代码来自“我的地图”组件，它显示了数据的输入方式和标记的创建方式：

refresh() {
    this.artworkService.retrieveAll().then( (artworkList) => {
      this.artworkList = artworkList;
      for (const artwork of this.artworkList) {
        const popupOptions = { className: 'customPopup' };
        const popupInfo =
          "<span class='customPopup'><b>" +
          artwork.name +
          "</b></span>" +
          "<br/>" +
          artwork.firstname + " " + artwork.lastname +
          "<br/>" +
          artwork.streetname + artwork.streetnumber + ", " + artwork.zipcode;
        console.log(artwork.name);
        L.marker([artwork.latitude, artwork.longitude], this.markerIcon)
          .addTo(this.map)
          .bindPopup(popupInfo, popupOptions);
      }

    });

  }

refresh（）{
this.artworkService.retrieveAll（）。然后（（artworkList）=>{
this.artworkList=artworkList；
用于（此artworkList的const artwork）{
const popupOptions={className:'customPopup'}；
常量弹出信息=
"" +
artwork.name+
"" +
“
”+
artwork.firstname+“”+artwork.lastname+
“
”+
artwork.streetname+artwork.streetnumber+“，”+artwork.zipcode；
console.log（artwork.name）；
L.标记（[artwork.latitude，artwork.latitude]，this.markerIcon）
.addTo（此.map）
.bindPopup（popupInfo、popupOptions）；
}
});
}

这是我的过滤器html：

<div class="leaflet-top leaflet-left">
  <div class="filterButton leaflet-control">
    <i class="fa fa-filter fa-7x"></i>
    <strong class="mt-4">District</strong>
    <select class="ml-1" name="zipcode" [(ngModel)]="zipcode">
      <option>-All-</option>
      <option *ngFor="let zipcode of artworkList">{{zipcode}}</option>
    </select>
  </div>
</div>

地区
-全部-
{{zipcode}}

可能可以通过管道实现，但我将为您的问题提供另一个实现。更改“选择”选项的值后，删除所有标记并添加所需标记的方法：

模板：

<select
  class="ml-1"
  name="zipcode"
  [(ngModel)]="zipcode"
  (ngModelChange)="changeZipcode()"
>
  <option>-All-</option>
  <option *ngFor="let list of artworkList">{{list.zipcode}}</option>
</select>

-全部-
{{list.zipcode}

ts:

map；
艺术工作者；
zipcode；
弹出选项={
类名：“测试2”
};
构建标记（工作列表）{
对于（让artworkList的艺术品）{
这是一个弹出窗口（艺术品）；
}
}
buildPopup（对象）{
常量popupInfo=`
${object.name}

${object.firstname}
${object.lastname}

${object.streetname}${object.streetnumber}
，${object.zipcode}
`;
L.marker（[object.latitude，object.longitude]，this.markerIcon）
.addTo（此.map）
.bindPopup（popupInfo，this.popupOptions）；
}
changeZipcode（）{
//任何标记的空地图
this.map.eachLayer（层=>{
if（L.Marker的层实例）this.map.removeLayer（层）；
});
如果（this.zipcode===“-All-”）{
//像选择之前一样构建所有标记
this.buildMarkers（this.artworkList）；
}否则{
//返回包含特定zipcode的数组内的onject
const currentArtworklist=this.artworkList.filter(
list=>list.zipcode==this.zipcode
);
此.buildMarkers（currentArtworklist）；
}
}

---

你能解释一下你想要实现的目标吗？当您单击某个地区时，您希望列出传单标记，但不在其中。我是新的传单，但如果你的问题是有关角度，我可以帮助你解释多一点传单是基于开放的街道地图！这只是一张地图，上面有很多小别针。在这个应用程序中，这些别针对应于人们在城市中发现的各种公共艺术，但如果别针太多，人们就会放松监管。因此，我想有一个过滤器，我选择例如地区一，它将只显示该地区的引脚，并删除其他。

map;
artworkList;
zipcode;
popupOptions = {
  className: "test test2"
};

buildMarkers(artworkList) {
   for (let artwork of artworkList) {
       this.buildPopup(artwork);
   }
}

buildPopup(object) {
    const popupInfo = `
        ${object.name} <br/>
        ${object.firstname}
        ${object.lastname} <br/>
        ${object.streetname} ${object.streetnumber}
        , ${object.zipcode}
      `;
    L.marker([object.latitude, object.longitude], this.markerIcon)
      .addTo(this.map)
      .bindPopup(popupInfo, this.popupOptions);
}

changeZipcode() {
    // empty map of any markers
    this.map.eachLayer(layer => {
      if (layer instanceof L.Marker) this.map.removeLayer(layer);
    });
    if (this.zipcode === "-All-") {
      // build all markers like before selection
      this.buildMarkers(this.artworkList);
    } else {
      // return onject inside array which contains the specific zipcode
      const currentArtworklist = this.artworkList.filter(
        list => list.zipcode == this.zipcode
      );
      this.buildMarkers(currentArtworklist);
    }
}