0

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.

1 respuesta 1

0

Descubrí la solución investigando que tenía que igualar la fuente de datos (variable dataSource) usando la directiva this.dataSource.data = this.informes; de esta manera el filtro se aplica correctamente

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.