Как я могу получить данные с помощью двух фильтров выбора?

Question

Я внедряю открытую карту улиц, чтобы показать расположение объектов жалоб, и я фильтрую ее с помощью опции выбора, которая содержит статус жалобы, у жалоб также есть тип, который я хочу добавить и использовать в качестве фильтра. Я запутался, как реализовать выбор параметров фильтра в то же время.

здесь есть функция отображения карты:

 ngOnInit() {
    this.showMap("all");
    this.getAllTypes()
  }
  change(event) {
    this.map.remove();
    this.map.off();
    this.map = null;
    if (this.map == null) {
      this.showMap(event);
    }
  }

  getAllTypes() {
    this.http.get('/api/complaintTypes').subscribe((complaintTypes: any[]) => {
      this.types = complaintTypes;
    });
  }

  showMap(status): void {
    let city = JSON.parse(localStorage.getItem('currentUser')).city
    this.map = L.map("map").setView([city.lat, city.lng], 12);

    L.tileLayer("http://{s}.tile.osm.org/{z}/{x}/{y}.png", {
      attribution: "Frugal Map"
    }).addTo(this.map);

    let myIcon = L.icon({
      iconUrl: "assets/img/favicon-16x16.png",
      iconSize: [16, 16]
    });

    if (status === "all") {
      this.http.get("/api/complaints").subscribe((data: any) => {
        this.complaints = data
        data.forEach(complaint => {
          if (complaint.appreciation === undefined) {
            myIcon = L.icon({ iconUrl: "assets/img/favicon-16x16.png", iconSize: [16, 16] });
          } else if (complaint.appreciation === -1) {
            myIcon = L.icon({ iconUrl: "assets/img/faces/Element 6-100px.png", iconSize: [16, 16] });
          } else if (complaint.appreciation === 0) {
            myIcon = L.icon({ iconUrl: "assets/img/faces/Element 4-100px.png", iconSize: [16, 16] });
          } else if (complaint.appreciation === 1) {
            myIcon = L.icon({ iconUrl: "assets/img/faces/Element 5-100px.png", iconSize: [16, 16] });
          }
          L.marker([complaint.address.lat, complaint.address.lng], {
            icon: myIcon
          }).addTo(this.map).bindPopup(complaint.issuer.firstName + ' ' + complaint.issuer.lastName + '</br><a href=\'/dashboard#/plainte/single/' + complaint._id + '\'> Plainte N°' + complaint.number + '</a>')
        });
      });
    } else {
      this.http.get("/api/complaints/byStatus/" + status).subscribe(
        (data: any) => {
          this.complaints = data
          data.forEach(complaint => {
            if (complaint.appreciation === undefined) {
              myIcon = L.icon({ iconUrl: "assets/img/favicon-16x16.png", iconSize: [16, 16] });
            } else if (complaint.appreciation === -1) {
              myIcon = L.icon({ iconUrl: "assets/img/faces/Element 6-100px.png", iconSize: [16, 16] });
            } else if (complaint.appreciation === 0) {
              myIcon = L.icon({ iconUrl: "assets/img/faces/Element 4-100px.png", iconSize: [16, 16] });
            } else if (complaint.appreciation === 1) {
              myIcon = L.icon({ iconUrl: "assets/img/faces/Element 5-100px.png", iconSize: [16, 16] });
            }
            L.marker([complaint.address.lat, complaint.address.lng], {
              icon: myIcon
            }).addTo(this.map).bindPopup(complaint.issuer.firstName + ' ' + complaint.issuer.lastName + '</br><a href=\'/dashboard#/plainte/single/' + complaint._id + '\'> Plainte N°' + complaint.number + '</a>')
          });
        },
        error => {
          if (error.status === 400) {
            this.showError(error.error.error, "Erreur!");
          }
        }
      );
    }
  }

---

и это html:

<div class="container-fluid">
  <div class="row">
    <div class="page-header">
      <div class="d-flex align-items-center">
        <h2 class="page-header-title text-dark">Map</h2>
      </div>
    </div>
  </div>
  <div class="col-xl-12">
    <div class="widget widget-11 has-shadow">

      <div class="row flex-row mt-3 mr-3 pt-3">
        <div class="col-6 select form-group">
          <div class="input-group">
            <span class="input-group-addon">
              <label for="types">Types</label>
            </span>
            <select name="types" class="custom-select form-control rounded" (change)="change($event.target.value)">
              <option selected value="allTypes">Tous</option>
              <option *ngFor="let type of types; let i = index" [value]="types[i].id">
                {{types[i].name}}
              </option>
            </select>
          </div>
        </div>
        <div class="col-6 select form-group">
          <div class="input-group">
            <span class="input-group-addon">
              <label for="types">Status</label>
            </span>
            <select name="account" class="custom-select form-control rounded" (change)="change($event.target.value)">
              <option selected value="all">Tous les status</option>
              <option value="pending">En attente</option>
              <option value="inProgress">En cours</option>
              <option value="done">Acceptée</option>
              <option value="rejected">Refusée</option>
            </select>
            <span class="input-group-addon">
              {{complaints.length}}
            </span>
          </div>
        </div>
        <div class="col-4 select form-group"></div>
      </div>

      <div class="widget-body p-0 border-top">
        <div id="map" class="map-container"></div>
      </div>

    </div>
  </div>
</div>

---

Я не понимаю и не могу найти хороший способ добавить второй фильтр по типу, мне нужна идея, какая-нибудь помощь!

Answer 1

Ц

public chosenType ;
public chosenStatus;

changeType(type){
  this.chosenType = type
  this.getData()
}

changeStatus(status){
  this.chosenStatus = status
  this.getData()
}

getData(){
this.http.get("/api/complaints/" + this.chosenStatus +"/"+this.chosenType).subscribe(...)
}

Html

   <select name="account" class="custom-select form-control rounded" (change)="changeStatus($event.target.value)">
     </select>

    <select name="account" class="custom-select form-control rounded" (change)="changeType($event.target.value)">
     </select>