error TS7053: Element implicitly has an 'any' type because expression of type 'any' can't be used to index type

Question

I am developing an application using Angular 15.
I need to create a dashboard with several sections. Each section should have a set of buttons named as range of data representation (which I need to fetch to the backend). I will specifically need the buttons: 7 days, 30 days, 60 days and Custom.
To develop the buttons, I created an ng-template:

<ng-template #sectionContainer let-sectionKey='sectionKey'>
  <mat-button-toggle-group #group="matButtonToggleGroup"
                           name="rangeDays"
                           [value]="sectionsFieldsModel[sectionKey]['dateRangeId']"
                           (change)="setDataAndUpdateChartBySectionAndFieldKey(group.value, sectionKey, 'dateRangeId')">
    <mat-button-toggle value="7dd">7 days</mat-button-toggle>
    <mat-button-toggle value="30dd">30 days</mat-button-toggle>
    <mat-button-toggle value="60dd">60 days</mat-button-toggle>
    <mat-button-toggle value="custom">Custom</mat-button-toggle>
  </mat-button-toggle-group>
</ng-template>

In the HTML of the component, I called up the template as follows:

<ng-container *ngTemplateOutlet="sectionContainer; context: { sectionKey: 'totalSells' }">

The function setDataAndUpdateChartBySectionAndFieldKey is written as follows:

setDataAndUpdateChartBySectionAndFieldKey(value: string, sectionKey: string, fieldKey : string){
    this.sectionsFieldsModel[sectionKey][fieldKey] = value;
    if(fieldKey == "locationId"){
      this.devicesMap["totalSells"] = this.filterDevicelist(value);
    }
  }

and the map sectionsFieldsModel is written as follows:

  sectionsFieldsModel: {
    totalSells: { [keyprop: string]: string };
    mostSoldProducts: { [keyprop: string]: string };
    usersNumber: { [keyprop: string]: string };
    usersAverageCost: { [keyprop: string]: string };
    hourlyCost: { [keyprop: string]: string };
  } = {
    totalSells: {},
    mostSoldProducts: {},
    usersNumber: {},
    usersAverageCost: {},
    hourlyCost: {},
  };

When I compile, the compiler returns the error:

error TS7053: Element implicitly has an 'any' type because expression of type 'any' can't be used to index type '{ totalSells: { [keyprop: string]: string; }; mostSoldProduc
ts: { [keyprop: string]: string; }; usersNumber: { [keyprop: string]: string; }; usersAverageCost: { [keyprop: string]: string; }; hourlyCost: { ...; }; }'.

Premising that I started studying Angular and TypeScript two weeks ago, could someone tell me what am I doing wrong?

error TS7053: Element implicitly has an 'any' type because expression of type 'any' can't be used to index type

0 Answers0