Dynamic function name error in angular 13

Question

i'm trying to create a dynamic menu of buttons using an interface MenuItem, i have to give each button an evenement to add it in (click) like this :

this is the error :

Element implicitly has an 'any' type because expression of type 'string' can't be used to index type 'TestMenuActComponent'.

No index signature with a parameter of type 'string' was found on type 'TestMenuActComponent'.

this is my interface :

menu.model.ts

export interface MenuItem {
  evenement: string,
  parametre?:string,
  id?: string,
  title?: string,
  class?: string,
  icon?: string,
  datafr?:string,
  click?:any,
  awNextStep?: boolean,
  onlySubItems?:boolean,
  step?:number,
  subItems?: any[],
}

and this is my menu : menu.ts

export const MENU: MenuItem[] = [
  {
    id:'',
    title:'Filtrer',
    class:'btn btn-primary btn-icon-text me-2 mb-2 mb-md-0',
    icon:'',
    evenement:"openLgModal",
    datafr:'filter',
    awNextStep:true,
    step :1,
    subItems:[],
  }]

the component when i use the buttons

<div class=" align-items-center flex-wrap text-nowrap">
<ng-container *ngFor="let btnItem of _menu">
    <ng-container *ngIf="!hasItems(btnItem)" >
    <button type="button" class="{{btnItem.class}}" **(click)=this[btnItem.evenement]()** >
        <i class="btn-icon-prepend" [attr.data-feather]="btnItem.datafr" appFeatherIcon></i>
        {{btnItem.title}}
    </button>

</ng-container>

the function i have to call is the following :

openLgModal() { this.child.openLgModal();

}

Could you add in your question the implementation of the method called by the click event ? — Ocunidee, Mar 22 '22 at 15:15
Does this answer your question? [Type 'undefined' cannot be used as index type](https://stackoverflow.com/questions/43836274/type-undefined-cannot-be-used-as-index-type) — JSON Derulo, Mar 22 '22 at 15:17
`btnItem.evenement` can be undefined, so this is not allowed: `this[btnItem.evenement]` — JSON Derulo, Mar 22 '22 at 15:18
it gives me another error No index signature with a parameter of type 'string' was found on type 'TestMenuActComponent'. — dija, Mar 22 '22 at 15:29
Element implicitly has an 'any' type because expression of type 'string' can't be used to index type 'TestMenuActComponent'. — dija, Mar 22 '22 at 15:30

Dynamic function name error in angular 13

0 Answers0