首页 > 解决方案 > Angular 不通过下拉选项过滤表格

问题描述

我有一个包含数据库数据的表,我需要使用下拉菜单过滤该表。问题是,即使我设法在控制台上获取过滤后的表格,表格也没有被过滤:它只是前端没有显示。我的过滤功能如下:

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

HTML 中的过滤器是这样的:

        <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>

我已经减少了我在前端过滤器中的错误,因为我可以在我这样做时过滤数据console.log。任何帮助或提示表示赞赏。

编辑:数组从这里获取数据:

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

标签: htmlangulartypescript

解决方案


我发现了问题:我需要使用 ngFor 上的过滤列表来显示新数组:我改变了

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

为了

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

感谢大家花时间阅读和评论。


推荐阅读