0

Tengo entendido que los filtros por default que viene con el componente no soporta una búsqueda especifica, si no que, todo lo concatena y luego hace una especie de include() para validar si algo de lo que viene como input viene dentro de la concatenación. Investigando podemos utilizar filterPredicate para ajustarlo a las necesidades. Pondré partes de código útiles para no inundar el post

select.component.html

<mat-label>Creador</mat-label>
<mat-select (selectionChange)="applyFilter( $event.value )">
 <mat-option value="RASMUS LERDOF">RASMUS LERDOF<mat-option>
 <mat-option value="JAMES GOSLING">JAMES GOSLING<mat-option>
 <mat-option value="GUIDO VAN ROSSUM">GUIDO VAN ROSSUM<mat-option>
</mat-select>

<mat-label>Lenguaje</mat-label>
<mat-select (selectionChange)="applyFilter( $event.value )">
 <mat-option value="PHP">PHP<mat-option>
 <mat-option value="JAVA">JAVA<mat-option>
 <mat-option value="PYTHON">PYTHON<mat-option>
</mat-select> 

<mat-label>¿Continente?</mat-label>
<mat-select (selectionChange)="applyFilter( $event.value )">
 <mat-option value="AMERICA">AMERICA<mat-option>
 <mat-option value="EUROPA">EUROPA<mat-option>
 <mat-option value="ASIA">ASIA<mat-option>
 <mat-option value="AFRICA">AFRICA<mat-option>
 <mat-option value="OCEANIA">OCEANIA<mat-option>
</mat-select>

select.component.ts

// Selector <app-select>
@Output() emitSelect: EventEmmiter<any> = new EventEmitter<any>();

applyFilter( value: string ): void {
  this.emitSelect.emit( value );
}

Aquí todo funciona bien, se capturan los valores en cuanto cambie el select y emite ese valor al componente padre. La mecánica esperada es que, la tabla se filtre por cada combinación de select, es decir, Si elijo continente = Europa, se filtre por el continente, pero si elijo continente = Europa y lenguaje = Python, esperaría como resultado a Guido Van Rossum

main.component.html

<app-select (emitSelect)="setFilter( $event )"></app-select>
<table mat-table [dataSource]="source" class="mat-elevation-z8 w-100" matSort>
  <ng-container matColumnDef="creador">
    <th mat-header-cell *matHeaderCellDef mat-sort-header class="text-center">
      Creador
    </th>
    <td mat-cell *matCellDef="let element" class="text-center fs7">
      {{element.creador}}
    </td>
  </ng-container>

  <ng-container matColumnDef="lenguaje">
    <th mat-header-cell *matHeaderCellDef mat-sort-header class="text-center">
      Lenguaje
    </th>
    <td mat-cell *matCellDef="let element" class="text-center fs7">
      {{element.lenguaje}}
    </td>
  </ng-container>

  <ng-container matColumnDef="continente">
    <th mat-header-cell *matHeaderCellDef mat-sort-header class="text-center">
      ¿A qué continente?
    </th>
    <td mat-cell *matCellDef="let element" class="text-center fs7">
      {{element.continente}}
    </td>
  </ng-container>
  <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr>
</table>
<mat-paginator class="w-100" [pageSizeOptions]="[5, 10, 25, 100]"></mat-paginator>

main.component.ts

@ViewChild(MatPaginator) paginator: MatPaginator;
@ViewChild(MatSort) sort: MatSort;
public displayedColumns: string[] = ['creador','lenguaje','continente'];
public source: MatTableDataSource<any>;
public selection = new SelectionModel;
public data = [
  {
    creador: 'RASMUS LERDOF',
    lenguaje: 'PHP',
    continente: 'EUROPA'
  },
  {
    creador: 'JAMES GOSLING',
    lenguaje: 'JAVA',
    continente: 'AMERICA'
  },
  {
    creador: 'GUIDO VAN ROSSUM',
    lenguaje: 'PYTHON',
    continente: 'EUROPA'
  }
];

ngOnInit(): void {
  this.source = new MatTableDataSource<any>( this.data );
  // Aquí estoy atorado, no se como decirle que haga una busqueda en encadenada, sin perder
  // los resultados previos
  this.source.filterPredicate = ( data: any, filter: string ) => {
        return !filter || data.creador === filter;
  };
  setTimeout(() => {
    this.source.paginator = this.paginator;
    this.source.sort      = this.sort;
  });

}

setFilter( value: string ): void {
  this.source.filter = value;
}

Nunca había implementado esta característica por lo que estoy medio perdido

1 respuesta 1

1

Como el filter de mat-table solo acepta strings por eso necesitas crear un objeto para almacenar el estado de los filtros.

Para guardar los valores de los filtros en el componente padre puedes crear una variable que sea un objeto como el siguiente y que tenga los valores de los filtros.

filtersState = {
  continente: '',
  creador: '',
  leanguaje: ''
}

select.component.html

Como ves para saber que filtro se ha seleccionado se pasa la key del select que es la misma que en filtersState.

<mat-label>Creador</mat-label>
<mat-select (selectionChange)="applyFilter('creador', $event.value )">
 <mat-option value="RASMUS LERDOF">RASMUS LERDOF<mat-option>
 <mat-option value="JAMES GOSLING">JAMES GOSLING<mat-option>
 <mat-option value="GUIDO VAN ROSSUM">GUIDO VAN ROSSUM<mat-option>
</mat-select>

<mat-label>Lenguaje</mat-label>
<mat-select (selectionChange)="applyFilter('lenguaje', $event.value )">
 <mat-option value="PHP">PHP<mat-option>
 <mat-option value="JAVA">JAVA<mat-option>
 <mat-option value="PYTHON">PYTHON<mat-option>
</mat-select> 

<mat-label>¿Continente?</mat-label>
<mat-select (selectionChange)="applyFilter('continente', $event.value )">
 <mat-option value="AMERICA">AMERICA<mat-option>
 <mat-option value="EUROPA">EUROPA<mat-option>
 <mat-option value="ASIA">ASIA<mat-option>
 <mat-option value="AFRICA">AFRICA<mat-option>
 <mat-option value="OCEANIA">OCEANIA<mat-option>
</mat-select>

select.component.ts

Aquí emites los valores en un objeto que tendrá el nombre del filtro(que se setea en la template) y su valor, tal como se ha puesto en la template.

// Selector <app-select>
@Output() emitSelect: EventEmmiter<any> = new EventEmitter<any>();

applyFilter( filter: string, value: string ): void {
  this.emitSelect.emit({ filter, value });
}

main.html Esto no se modifica como se envia un objeto con los valores pues no cambia.

<app-select (emitSelect)="setFilter( $event )"></app-select>

Luego en el main haces el filtrado con los datos que quieras.

main.ts

filtersState = {
  continente: '',
  creador: '',
  leanguaje: ''
}

ngOnInit(): void {
  this.source = new MatTableDataSource<any>( this.data );
  // Aquí estoy atorado, no se como decirle que haga una busqueda en encadenada, sin perder
  // los resultados previos

  // como ves no se usa el `filter` de mattable sino el que tiene el componente gracias a las arrow functions se tiene acceso al `this` que hace referencia al componente.
  this.source.filterPredicate = ( data: any, filter: string ) => {
        const creador = data.creador.toLowerCase().includes(this.filterState.creador);
        const continente = data.continente.toLowerCase().includes(this.filtersState.continente);
        // y asi con el lenguaje
        return creador || continente;
  };
  setTimeout(() => {
    this.source.paginator = this.paginator;
    this.source.sort      = this.sort;
  });

}

setFilter(selection: {filter: string, value: string}): void {
  this.filtersState[filter] = value;
  this.source.filter = value; // este filtro no se usa solo es para hacer el trigger del filterPredicate
}
1
  • 1
    Que trucazo sensei. Muchas gracias Commented el 16 abr. 2020 a las 19:54

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

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