Wie erstellt man die dynamische Tabelle Angular Cli 4 mit * ngFor.? - Angular, Kommandozeilenschnittstelle

Ich arbeite im Automatisierungsprojekt mit Angular CLI. So erstellen Sie die dynamischen Spalten und die dynamische Ringtabelle mit dem *ngFor.?

In der vorherigen Version von Angular wie AngularJS. Ich hatte diese Methode mit Hilfe von AngularJS dynamische Tabelle mit unbekannter Anzahl von Spalten

Wie löst man das?

Antworten:

Sie müssten verschachtelt haben ngFor Anweisungen, Sie müssten auch Ihr Datenobjekt einrichten, um sicherzustellen, dass es einfach ist, damit zu arbeiten, aber so würden Sie dies erreichen

<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>

OK, lassen Sie mich diese Diskussion abschließen. Ich habe mein Problem gelöst, indem ich dies in meinem Controller getan habe. Hier ist mein 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-->

`Daher ist mein Problem gelöst.