/ / Comment créer une table dynamique Angular Cli 4 avec * ngFor.? - interface angulaire en ligne de commande

Comment créer une table dynamique Angular Cli 4 par * ngFor. - interface de ligne de commande angulaire

Je travaille dans un projet d'automatisation en utilisant Angular CLI. Comment créer les colonnes dynamiques et le tableau de lignes dynamique à l'aide du *ngFor.?

Dans la version précédente de angular comme AngularJS. J'avais fait cette méthode avec l'aide de Tableau dynamique AngularJS avec un nombre inconnu de colonnes

Comment résoudre ceci?

Réponses:

0 pour la réponse № 1

Vous auriez besoin d'avoir imbriqué ngFor Dans ce cas, vous devez également configurer votre objet de données pour vous assurer qu’il est facile à utiliser, mais c’est ainsi que vous y parviendrez.

<table *ngIf="columns">
<thead>
<tr>
<th *ngFor="let column of columns">{{column.header}}</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let column of columns">
<td *ngFor="let row of column.rows">
{{row.whatever}}
</td>
</tr>
</tbody>
</table>

0 pour la réponse № 2

OK, laissez-moi conclure cette discussion. J'ai résolu mon problème en faisant cela dans mon contrôleur. Voici mon code: `StudentsDetails = [];

columns: string[] = [];

constructor(private newService: StudentsService) { }

ngOnInit() {
this.newService.fetchData()
.subscribe(responseStudentsDetails => {
this.StudentsDetails = responseStudentsDetails;
this.columns = Object.keys(this.StudentsDetails[0]);
})
};

Since StudentsDetails is my JSON array. I extract the keys from the StudentsDetails[0]. Then, I added the previous Wesley"s code in my html file.

<table class="table table-bordered table-striped table-sm">
<thead>
<tr>
<th *ngFor="let column of columns | filter : filter">{{column}}
</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let row of StudentsDetails | filter : filter | paginate: { itemsPerPage: items, currentPage: Page }">
<td *ngFor="let column of columns | filter : filter">
{{row[column]}}
</td>
</tr>
</tbody>
</table>
<div class="row">
<div class="col-sm-4">
<div class="row">
<div class="col-sm-3">
<select class="form-control form-control-sm" id="page" [(ngModel)]="items">
<option>5</option>
<option>10</option>
<option>25</option>
</select>
</div>
<div class="col-sm-3">
<input type="text" [(ngModel)]="Page" class="form-control form-control-sm" id="page-no" placeholder="Page">
</div>
</div>
</div>
<div class="col-sm-8">
<nav>
<ul class="pagination">
<li class="page-item">
<pagination-controls (pageChange)="Page = $event"></pagination-controls>
</li>
</ul>
</nav>
</div>
</div>
<!--/.row-->

`Par conséquent, mon problème est résolu.