1

Buen día y saludos a todos. Tengo un mat-table en angular donde muestro información recibida de un json, similar a esto:

[
 {
    Id: "1",
    Nombre: "Leonel",
    Serie: "75603",
    Modulo: {
      Entrada: "Optimizar",
      Salida: "Descargar"
    }
 },
 {
    Id: "2",
    Nombre: "Jennifer",
    Serie: "84219",
    Modulo: {
      Entrada: "Renovar",
      Salida: "Expedir"
    }
 }
]

El problema surge cuando uso el filtro de búsqueda, que funciona solo cuando agrego en la tabla las columnas: Id, Nombre y Serie. Si agrego las columnas Entrada y Salida me muestra la información pero el filtro ya no me funciona y en consola se genera el siguiente error:

ERROR TypeError: Cannot read property 'toString' of undefined
  at eval (VM7878 table-basic-example.ts:51)
  at Array.some (<anonymous>)
  at MatTableDataSource.listData.filterPredicate (VM7878 table-basic-example.ts:48)
  at eval (table-data-source.ts:221)
  at Array.filter (<anonymous>)
  at MatTableDataSource._filterData (table-data-source.ts:221)
  at MapSubscriber.eval [as project] (table-data-source.ts:199)
  at MapSubscriber._next (map.ts:81)
  at MapSubscriber.Subscriber.next (Subscriber.ts:102)
  at CombineLatestSubscriber.notifyNext (combineLatest.ts:247)

Tengo el código ya realizado en: https://stackblitz.com/demo

0

2 respuestas 2

2

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>

Ahora 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];
  }

Al 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
        );
      });
    };
0
0

Hola jefferson otra forma a la de oscar puede ser descomentar todo lo que tienes y solo en la función de filtrar.

 this.listData.filterPredicate = (data, filter) => {
      const dataStr = JSON.stringify(data).toLowerCase();
      return dataStr.indexOf(filter) != -1;
 };

Y ya funciona sin errores, como puedes ver convertirmos el json a una cadena de texto y con el indexOf buscamos el filtro que es mandado y realizamos la operación.

Espero te sirva saludos :)

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.