Hola a todos estoy intentando aplicar un filtro a una tabla en Angular, recibo los datos de forma correcta y la tabla muestra los datos también de forma correcta, pero a la hora de aplicar el filtro la app no hace nada. Pego el el html y el .ts pegaré en la pregunta las porciones de código que creo que son necesarias para resolver la cuestión: HTML: <
div class="container">
<!-- Filter Form Field -->
<mat-form-field appearance="standard">
<mat-label>Filter</mat-label>
<input matInput (keyup)="applyFilter($event)" placeholder="Search" #input>
</mat-form-field>
</div>
<div class="mat-elevation-z8">
<table mat-table [dataSource]="dataSource" matSort class="full-width-table">
<div class="container">
<!-- Filter Form Field -->
<mat-form-field appearance="standard">
<mat-label>Filter</mat-label>
<input matInput (keyup)="applyFilter($event)" placeholder="Search" #input>
</mat-form-field>
</div>
<div class="mat-elevation-z8">
<table mat-table [dataSource]="dataSource" matSort class="full-width-table">
Aqui van los campos de la tabla
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<!-- funcion con evento click para handlear la fila de datos y cargar en detalle-->
<tr mat-row (click)="clickedRow(dataSource.id)" *matRowDef="let dataSource; columns: displayedColumns;"></tr>
<!-- Row shown when there is no matching data on filter. -->
<tr class="mat-row" *matNoDataRow>
<!-- <td class="mat-cell" colspan="5">No data matching the filter "{{input.value}}"</td> -->
</tr>
</table>
<!--<mat-paginator [pageSizeOptions]="[10, 20, 30, 50]" aria-label="Select page of users"></mat-paginator>-->
</div>
Ahora pego el typeScript desde donde tengo el metodo que llama al evento de filtro applyFilter(event: Event):
export class TicketTableComponent implements AfterViewInit, OnInit {
displayedColumns: string[] = ['id', 'nombreInforme', 'fechaCreacion', 'numeroContrato', 'idEmpresa', 'idPresupuesto'];
rutaListaInformes: string = 'http://localhost:8099/api/obtenerTodosLosInformes';
informes: any;
dataSource = new MatTableDataSource<IListaInformesCliente>();
@ViewChild(MatPaginator) paginator!: MatPaginator;
@ViewChild(MatSort) set matSort(sort: MatSort) {
this.dataSource.sort = sort;
};
constructor(private router: Router, private httpClient: HttpClient) {
}
ngOnInit(): void {
this.refresh();
this.httpClient.get(this.rutaListaInformes).subscribe({
next: c => {
this.informes = (c as IListaInformesCliente[]);
this.dataSource = this.informes;
},
error: (error: HttpErrorResponse) => {
alert('Ha habido un problema al recibir el json');
console.log(error);
this.router.navigate(['/dashboard/home']);
},
complete: () => {
console.log('peticion http completa');
}
});
this.refresh();
}
ngAfterViewInit(): void {
// this.dataSource.paginator = this.paginator;
}
refresh(): void {
}
applyFilter(event: Event) {
console.log('se produce el evento');
const filterValue = (event.target as HTMLInputElement).value;
this.dataSource.filter = filterValue.trim().toLowerCase();
}
}
Tras la traza -> console.log('se produce el evento'); puedo comprobar que el evento esta funcionando correctamente, lo único que ocurre es que no veo el porqué de no aplicarse el filtro.