Esto es por que tienes un objeto anidado, entonces tienes que buscar en "Modulo.Entrada"
pero para hacer esto, es necesario que hagas los siguientes cambios.
Cambia el nombre de tus columnas en displayedColumns
delimitando las propiedades anidadas con un punto.
displayedColumns: any[] = [
"Id",
"Nombre",
"Serie",
"Modulo.Entrada",
"Modulo.Salida",
"actions"
];
Así mismo debemos actualizar el html.
<ng-container matColumnDef="Modulo.Entrada">
<mat-header-cell *matHeaderCellDef mat-sort-header>Entrada</mat-header-cell>
<mat-cell *matCellDef="let element">{{element.Modulo.Entrada}}</mat-cell>
</ng-container>
<ng-container matColumnDef="Modulo.Salida">
<mat-header-cell *matHeaderCellDef mat-sort-header>Salida</mat-header-cell>
<mat-cell *matCellDef="let element">{{element.Modulo.Salida}}</mat-cell>
</ng-container>
Después nada mas haceAhora falta buscar la propiedad correcta, esto lo logramos separando las propiedades mediante un split en el string de displayedColumns
.
getValueFrom(data: any, column: string) {
if (column.includes(".")) {
const nested = column.split(".");
return nested.reduce((prev, current) => {
return prev[current];
}, data);
}
return data[column];
}
AhoraAl final solo invocamos la función.
this.listData.filterPredicate = (data, filter) => {
return this.displayedColumns.some(ele => {
return (
ele != "actions" &&
this.getValueFrom(data, ele)
.toString()
.toLowerCase()
.indexOf(filter) != -1
);
});
};