Angular not filtering table by dropdown options

Question

I have a table with data from database and I need to filter that table using dropdown menu. Thing is, the table isn't getting filtered even when I manage to get the filtered table on console: It's just the front end not showing. My filter function is the following:

FiltrarTipoGestion(data) {
    let tipoGestion = data;
    if (data != "0") {      
        this.listPerfilamiento2 = this.listPerfilamiento.filter(x => x.tipoGestionDescripcion.toLowerCase() == tipoGestion.toLowerCase());
    } else {
        this.listPerfilamiento2 = this.listPerfilamiento;
    }
}

The filter in the HTML is this :

        <label class="col-lg-1 float-left">Tipo de gestión</label>
        <div class="col-lg-2 float-left">
            <select (change)="FiltrarTipoGestion($event.target.value)" [(ngModel)]="perfilamiento.tipoGestionDescripcion" class="form-control form-control-sm">
                <option *ngFor="let tg of listTipoGestion;" value="{{tg.nombre}}">{{tg.nombre}}</option>
            </select>
        </div>

I've reduced my error being in the front end filter, since I'm able to get data filtered when i do console.log. Any help or tip is appreciated.

Edit : the array gets the data from here:

this._service.getListarPerfilamiento(this.TipoPerfilId).subscribe((data) => {
  this.listPerfilamiento = data['data'];
  this.listPerfilamiento2 = data['data'];
  this.listPerfilamientoAll = data['data'];
 
  if (this.TipoPerfilId == 1) {
    this.ShowAgencia = true;
    this.ShowMensajeria = false;


  } else {
    this.ShowAgencia = false;
    this.ShowMensajeria = true;
  }
})

Please share the table template and how this.listPerfilamiento2 to linked to the table. — Nikhil Walvekar
sure, i'll edit my answer. @DRASHTIDOBARIYA, sorry to ask but would it still work if i have data from database? i'm new to using stackblitz. — Luis Salazar
Could you share with us your HTML template where your table is defined, or a StackBlitz reproducing the behaviour ? If your data is retreived from API/DB call, please mock up data by passing it directly — Sixteen
sure, i made the mockup: stackblitz.com/edit/angular-ivy-ty7ru4?file=src/app/… I'm having a problem when doing in the dropdown the $event.target.value, it doesn't let me, says Property 'value' does not exist on type 'EventTarget', but besides that, that is the table i have and i need each option in the dropdown to filter the table, which i'm not able to do. — Luis Salazar

Luis Salazar Luis Salazar · Accepted Answer · 2021-05-04T19:57:12

I've found the problem : i needed to use the filtered list on the ngFor for the new array to show up : i changed

<tr *ngFor="let pf of listarPerfilamiento; index as i; let l = count;" style="cursor: pointer;">

for

<tr *ngFor="let pf of filteredPerfilamiento; index as i; let l = count;" style="cursor: pointer;">

Thanks to everyone for taking their time reading and commenting.

Angular not filtering table by dropdown options

1 Answers