1

Hola estoy tratando de armar una dataTable (mat-table) de angular material con un objeto formado de varias tablas de la BD que me mandan desde el backend. El objeto que me llega es el siguiente:

introducir la descripción de la imagen aquí

Esto es lo que me trae el response.dato:

introducir la descripción de la imagen aquí

Y el encabezado de cada columna también lo podría sacar del objeto (response.title):

introducir la descripción de la imagen aquí

Mi idea es insertar esos datos en la mat table donde el .ts es:

import { Component, OnInit } from '@angular/core';
import { MatTableDataSourcePageEvent } from '@angular/material/table';
import { MatTableDataSource } from '@angular/material/table';
import { MatTableModule } from '@angular/material/table';
import { CdkTableModule }  from '@angular/cdk/table';
import { PayrollServices } from 'src/app/services/payroll.services';
import { global } from 'src/app/services/global';


@Component({
  selector: 'app-payroll',
  templateUrl: './payroll.component.html',
  styleUrls: ['./payroll.component.css'],
  providers: [PayrollServices]
})
export class PayrollComponent {
  public url;
  public data :any;
  public array: any;
  public columnas: string[]=[];

  

  constructor(
    private _payrollServices: PayrollServices
  ) {
    this.url = global.url;
   }

   ngOnInit(): void {
     this.getPosts(); 
  }

  getPosts(){
    this._payrollServices.getPosts().subscribe(
      response =>{
        this.data= response;
        this.columnas = response.title;

        console.log(this.columnas);
        console.log(this.data);   
      },
      error =>{
        console.log(error)
      }
    )
  }


}

Y el HTML es el siguiente:

<div>
        <table mat-table [dataSource]= "data" class="mat-elevation-z4">
            <ng-container matColumnDef="columna" *ngFor="let columna of columnas">
                <th mat-header-cell *matHeaderCellDef>{{columnas}}</th>
                <td mat-cell *matCellDef="let element">{{element[columnas]}</td>
            </ng-container>

            <tr mat-header-row *matHeaderRowDef="columnas"></tr>
            <tr mat-row *matRowDef="let row; columns: columnas" ></tr>
        </table>
    </div>

Pero me da los siguientes errores:

introducir la descripción de la imagen aquí

He buscado información sobre lo que estoy queriendo hacer y no encuentro. Lo que encuentro siempre dejan al menos el encabezado de cada columna fijo, y necesito que todo sea dinámico. Si alguien tiene solución para esto le voy a estar muy agradecido. PD: Perdón si estoy cometiendo algún error fulero, hace poco empecé a programar y menos tiempo que estoy con angular material. :)

1 respuesta 1

0

Creo que te está fallando el tipo de dato, estás enviando una colección de objetos y está esperando un string. Prueba convirtiendo la variable de tu array antes de pasarla al material con:

 getPosts(){
this._payrollServices.getPosts().subscribe(
  response =>{
    this.data= response;
    this.columnas = response.title;
    this.columnas = JSON.stringify(this.columnas)

    console.log(this.columnas);
    console.log(this.data);   
  },
  error =>{
    console.log(error)
  }
)

}

Espero que te sirva.

1
  • Muchas gracias por tu pronta respuesta. Si lo convierte en un string, pero no lo puedo recorrer en el HTML para generar las columnas. A no ser que sepas otra manera.
    – Damian
    Commented el 10 sept. 2021 a las 18:57

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.