Loading

Print table using two ngFor loop

Print table using two ngFor loop

Mandar Shinde

Dear all,

Hope you are doing well. I was developing one component using Angular 7 and ASP .net MVC with REST api. Table code :-

class="table">
#
Game
Platform
Release
"let game of games; let i = index">
{{i + 1}}
{{game.game}}
{{game.platform}}
{{game.release}}

How can I print this data more dynamically l mean if I have get headers which I want am bringing from database.

what I have tried is that :-

class="table">
#
"let header of headers;">
{{ header['HeaderName'] }}
"let game of games; let i = index">
{{i + 1}}
{{game[i][header]}}

Here I am able to see table headers only not table data.

How can I overcome on above problem.

Thanking you in advance.

Regards.

2 Replies

Know the answer? Post it — somebody with the same question will find it here.

Vishal Patel7y ago
If you want to get the key of your object as the head of your table, you should create a custom pipe.
import { PipeTransform, Pipe } from '@angular/core';

@Pipe({name: 'keys'})
export class KeysPipe implements PipeTransform {
transform(value, args:string[]) : any {
let keys = [];
for (let key in value) {
keys.push(key);
}
return keys;
}
}
Now into your html template:
<table>
<thead>
<tr>
<th *ngFor="let head of items[0] | keys">{{head}}th>
tr>
thead>
<tbody>
<tr *ngFor="let item of items">
<td *ngFor="let list of item | keys">{{item[list]}}td>
tr>
tbody>
table>
+1
Komal Rathod7y ago
Try following to get header details:

{{i + 1}}
{{game.header['HeaderName']}}
+1