Angular 5: как динамически привязывать события к кнопке из списка

Question

<div id="home" class="tab-pane fade in" style="text-align:left;opacity: 1;" >
   
  <button *ngFor="let tool of toolArray" class="m-btn btn btn-secondary" type="button" (click)="{{tool.ToolMethod}}()" placement="bottom"
      ngbTooltip="{{tool.Tooltip}}">
      <img src={{tool.ToolImgPath}} alt="" width="24" height="24"/>
  </button>

</div>

Допустим, у меня есть некоторые инструменты, управляемые администратором, если пользователь входит в систему, он может использовать эти инструменты для редактирования.

 let toolArray = [
    {ToolCategory: "analysis"
    ToolId: 96
    ToolImgPath: "images/zoom-selection.png"
    ToolMethod: "zoomToClickedFeature"
    ToolName: "an_zoomto_selected"
    Tooltip: "Zoom To Selected Feature"}
]

если я добавлю это в html с помощью ngFor, получится ошибка, подобная

Got interpolation ({{}}) where expression was expected

Answer 1

Снимите фигурные скобки с (click)="{{tool.ToolMethod}}()" до (click)="tool.ToolMethod()" и измените код на что-то вроде этого, чтобы получить правильную ссылку на соответствующий метод:

public zoomToClickedFeature() {
  console.log("do something");
}

public toolArray = [
  {
    ToolCategory: "analysis",
    ToolId: 96,
    ToolImgPath: "images/zoom-selection.png",
    ToolMethod: this.zoomToClickedFeature,
    ToolName: "an_zoomto_selected",
    Tooltip: "Zoom To Selected Feature"
  }
];

Массив и функция должны быть свойствами классакомпонента.

Answer 2

Если метод является членом контроллера, вы должны использовать this, например: (click)="this[tool.ToolMethod]()".

Вот рабочий пример:

https://stackblitz.com/edit/angular-q2l54d?file=src%2Fapp%2Fapp.component.html