/ / Jak utworzyć tabelę dynamiczną Angular Cli 4 przez * ngFor.? - kątowy, interfejs linii poleceń

Jak utworzyć tabelę dynamiczną Angular Cli 4 przez * ngFor.? - kątowy, interfejs linii poleceń

Pracuję w projekcie automatyzacji przy użyciu Angular CLI. Jak utworzyć dynamiczne kolumny i dynamiczną tabelę wierszy za pomocą *ngFor.?

W poprzedniej wersji kątowej jak AngularJS. Zrobiłem tę metodę z pomocą Dynamiczna tabela AngularJS z nieznaną liczbą kolumn

Jak rozwiązać ten problem?

Odpowiedzi:

0 dla odpowiedzi № 1

Będziesz musiał zagnieżdżać ngFor oświadczenia, musisz także skonfigurować obiekt danych, aby upewnić się, że jest on łatwy w użyciu, ale w ten sposób możesz to osiągnąć

<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 dla odpowiedzi nr 2

OK, pozwól mi zakończyć tę dyskusję. Rozwiązałem mój problem, robiąc to w moim kontrolerze. Oto mój kod: `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-->

"Dlatego mój problem został rozwiązany.