I've got a simple class like so:
export class ProductionByMonth { producer: string; date: string; station: string; total: number; points: { [abbrev: string]: number }; pointFor(abbrev: string): number { if (abbrev in this.points) { return this.points[abbrev]; } else { return 0; } } }
And I've got an array of 'abbrev' which contains all the keys that might appear in that `points` dictionary. I can hardcode the igx-column entries for the first 4 items, but then I don't know how to do the points.
Every row will have the exact same keys in the points dictionary, all of which are in the abbrev array.
Correct me if I am wrong, you are asking how to create column collection dynamically based on a dictionary of values.
This could be achieved easily by defining a columns collection on ngOnInit and iterate through that collection with *ngFor in order to create the columns.
This is an example that is showing how to dynamically create igxGrid columns.
I'm so sorry I didn't see this reply! I just tried that out but it's not working.
I put this code into my html file:
<igx-column *ngFor="let abbrev of abbrevs" [filterable]="false" [groupable]="false" [sortable]="false" [header]="abbrev" datatype="number" [field]="pointFor(abbrev)"></igx-column>
But when I run, I'm getting this:
> ERROR TypeError: _co.pointFor is not a function
You can see that my ProductionByMonth class does define that method. My rows is defined as an array of that type, and I event did a print just to be sure I'm really getting that type:
console.info(`valid: ${x[0] instanceof ProductionByMonth}`); this.rows = x;
And the console of course say "valid: true" from that output.
Of course the issue here is that pointFor returns a value, as there's not really a "field" to use. If I instead put [field]="points[abbrev]" I don't get any errors, but there's no data displayed in the column cell either.