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.
Hi Scott,
Best way to do this is to extract the points in your component's constructor, or whenever they are available, and pass them as a spread to the *ngFor defining the columns.
Something like:
Then your columns would look like this:
Of course, the columns object probably wouldn't be simple array of strings.
I hope this helps!
Konstantin Dinev