html code:
<tr *ngFor = "let row of food;">
<td *ngFor ="let col of headers;">
{{row[col]}}
</td>
</tr>
angular component code:
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
});
}
}
I'm trying to extract each object from the array from food and print the values of array based on their corresponding key value.
Change your code to this:
in first.component.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>
in first.component.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]);
}
Here is a working example: https://stackblitz.com/edit/angular-ivy-zmucpt?file=src/app/first.component.ts