html - 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;
}
})
解决方案
我发现了问题:我需要使用 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;">
感谢大家花时间阅读和评论。
推荐阅读
- oracle - 使用 Oracle ChatBot 在 google 上构建操作
- c# - 提交和构建 CI
- java - 在 VSCode 中使用 Kotlin
- python - 烧瓶分页查询示例?
- file - 使用 Perl 在多个文件中搜索字符串
- tensorflow - 尝试在pycharm上使用python运行卷积神经网络时为什么会出现类型错误
- json - “本应解码字符串,但找到了字典。”
- node.js - Redis 节点 LPUSH 命令无法解析
- c++ - makefile:6:目标“所有”的配方在 ubuntu-16.04 上失败
- amazon-dynamodb - AWS App Sync dynamodb 解析器在排序键中使用 begin_with 表达式不起作用