código HTML:
<tr *ngFor = "let row of food;"> <td *ngFor ="let col of headers;"> {{row[col]}} </td> </tr>código de componente angular:
export class FirstComponent implements OnInit { public header; food=[{Project_title: 'Avocado', Benefit: true, Completion_date:'01/10/2022', Project_description:160, Project_cost:'some long text some long text some long text', Accomplishments:'something', help_needed:'Yes', Project_leader:'XYZ', Project_Manager:'ABC', Savings:'Some very long text Some very long text Some very long text Some very long text Some very long text Some very long text', complete_status:'Completed' }] constructor() { } ngOnInit(): void { this.headers=Object.keys(this.food[0]); \\this is used to assign all the keys in an array }); } }Estoy tratando de extraer cada objeto de la matriz de alimentos e imprimir los valores de la matriz en función de su valor clave correspondiente.
Cambia tu código a este:
en primer.componente.html
<table> <tr> <th *ngFor="let column of headers"> {{ column }} </th> </tr> <tr *ngFor="let row of rows"> <td *ngFor="let column of headers"> {{ row[column] }} </td> </tr> </table>en primer.componente.ts
export class FirstComponent implements OnInit { headers = []; rows = [ { Project_title: 'Avocado', Benefit: true, Completion_date: '01/10/2022', Project_description: 160, Project_cost: 'some long text some long text some long text', Accomplishments: 'something', Help_needed: 'Yes', Project_leader: 'XYZ', Project_Manager: 'ABC', Savings: 'Some very long text Some very long text Some very long text Some very long text Some very long text Some very long text', complete_status: 'Completed', }, ]; constructor() {} ngOnInit() { this.headers = Object.keys(this.rows[0]); }Aquí hay un ejemplo práctico: https://stackblitz.com/edit/angular-ivy-zmucpt?file=src/app/first.component.ts