AG Grid setting dynamic row data name Failed to execute 'setAttribute' on 'Element'

Question

I am using angular ag-grid and I am trying to use a dynamic gridData name inside datasource, [rowData]. I keep getting errors when I am trying to append 'i' to the gridDataName. What may the possible issue in my case? I tried

[rowData]="gridData"+i
[rowData]="gridData"+${i}
[rowData]="gridData${i}" etc

Failed to execute 'setAttribute' on 'Element': '+i'

<div *ngFor="let item of apiList; let i = index">
                    
    <ag-grid-angular [rowData]="gridData"+i>
    </ag-grid-angular>

</div>

On typescript end, the data from different apis are assigned to griddata with names appended by numbers.

this.gridData1 = 'make call to api1 get data'
this.gridData2 = 'make call to api2 get data'
this.gridData3 = 'make call to api2 get data'

this.apiList = ['api1', 'api2', 'api3']

danday74 · Accepted Answer · 2021-08-04 22:06:58Z

1

change the code to this:

this.myObject.gridData1 = 'make call to api1 get data'
this.myObject.gridData2 = 'make call to api2 get data'
this.myObject.gridData3 = 'make call to api2 get data'

<ag-grid-angular [rowData]="myObject['gridData' + i]">
</ag-grid-angular>

OR you could probably just do:

<ag-grid-angular [rowData]="this['gridData' + i]">
</ag-grid-angular>

answered Aug 4, 2021 at 22:06

danday74

58.1k56 gold badges273 silver badges337 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Kurkula Over a year ago

this is a great way to use the index for rowData.

Collectives™ on Stack Overflow

AG Grid setting dynamic row data name Failed to execute 'setAttribute' on 'Element'

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related