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

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']

Solution

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>