In trying to create a grid component that uses structured data containing definitions for columns and an array of data.
Each column definition includes a callback function to customize the display of that specific column's value.
Within each callback, a console.log() is called to track how many times the callback function is executed.
I'm puzzled as to why the callback function is initially called four times, and then only two times after the changeSort() event is triggered. Can anyone shed some light on this?
The table component I have written looks like this:
import { Component, OnInit, Input } from '@angular/core';
@Component({
selector: 'app-table',
templateUrl: './table.component.html',
styleUrls: ['./table.component.css']
})
export class TableComponent implements OnInit {
public grid: any;
constructor() {
this.grid = {
columns: [],
data: [],
};
}
ngOnInit() {
this.grid = {
data: [
{
desc: 'hello 1',
header: 'my header 1'
},
{
desc: 'hello 2',
header: 'my header 2'
},
{
desc: 'hello 3',
header: 'my header 3'
}
],
columns: [
{
title: 'Description',
field: 'desc',
sortable: false,
callback: (value) => this.myCallback1(value),
},
{
title: 'Header',
field: 'header',
sortable: true,
callback: (value) => this.myCallback2(value),
},
],
};
}
public changeSort(field) {
console.log(field);
}
public myCallback1(value) {
console.log('myCallback', value
return value + ' mc1';
}
public myCallback2(value) {
console.log('myCallback2', value);
return value + ' mc2';
}
}
Here is the template for this component :
<div class="table-responsive">
<table class="table table-striped table-sm">
<thead>
<tr>
<th>#</th>
<th *ngFor="let col of grid.columns">
<span (click)="changeSort(col)" *ngIf="col.sortable">{{col.title}}</span>
<span *ngIf="!col.sortable">{{col.title}}</span>
</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let row of grid.data; let i = index">
<td>{{i+1}}</td>
<td *ngFor="let col of grid.columns">{{col.callback ? col.callback(row[col.field]) : row[col.field]}}</td>
</tr>
</tbody>
</table>
</div>
This is the error log at the beginning:
myCallback hello 1
myCallback2 my header 1
myCallback hello 2
myCallback2 my header 2
myCallback hello 3
myCallback2 my header 3
myCallback hello 1
myCallback2 my header 1
myCallback hello 2
myCallback2 my header 2
myCallback hello 3
myCallback2 my header 3
myCallback hello 1
myCallback2 my header 1
myCallback hello 2
myCallback2 my header 2
myCallback hello 3
myCallback2 my header 3
myCallback hello 1
myCallback2 my header 1
myCallback hello 2
myCallback2 my header 2
myCallback hello 3
myCallback2 my header 3