ng2-table
ng2-table copied to clipboard
Iterate over rows in html
Hello everyone,
I am trying to iterate over the rows inside the ng-table tag but its not working. I do know that you could specify [rows]="rows" but for a use case I want to iterate over. how is that possible? The following I am doing
<ng-table [config]="config"
[columns]="columns">
<tr *ngFor="let row of rows">
<td>1</td>
<td>{{ row.eid }}</td>
<td>{{ row.rankValue }}</td>
<td>{{ row.reason.similarilty }}</td>
</tr>
</ng-table>
You can do your example without iteration:
<ng-table [config]="config"
[columns]="columns"
[rows]="rows">
</ng-table>
With columns:
public columns:Array<any> = [
{title: 'TITLE1', name: 'const'},
{title: 'TITLE2', name: 'eid'},
{title: 'TITLE3', name: 'rankValue'},
{title: 'TITLE4', name: 'similarilty'}
];
On the table.ts component:
public onChangeTable(config:any, page:any = {page: this.page, itemsPerPage: this.itemsPerPage}):any {
if (config.filtering) {
Object.assign(this.config.filtering, config.filtering);
}
if (config.sorting) {
Object.assign(this.config.sorting, config.sorting);
}
let filteredData = this.changeFilter(this.data, this.config);
let sortedData = this.changeSort(filteredData, this.config);
this.rows = page && config.paging ? this.changePage(page, sortedData) : sortedData;
this.rows = reduceData(this.rows); // <= THIS LINE !
this.length = sortedData.length;
}
private reduceData(rows: any) {
const reducedData = [];
rows.forEach(row => {
reducedData.push({
const: 1,
eid: row.eid,
rankValue: row.rankValue,
similarilty: row.reason.similarilty
});
});
return reducedData;
}