时间戳

首页 > 解决方案 > Angular 5：如何从列表中动态绑定按钮上的事件

angular5 - Angular 5：如何从列表中动态绑定按钮上的事件

问题描述

<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"}
]

如果我使用 ngFor 在 html 中添加它，它会出现类似错误

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

标签： angular5

解决方案

如果该方法是控制器的成员，您应该使用thislike: (click)="this[tool.ToolMethod]()"。

这是一个工作示例：

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

推荐阅读