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:
Esto es lo que me trae el response.dato:
Y el encabezado de cada columna también lo podría sacar del objeto (response.title):
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:
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. :)