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