Ionic Angular中img标签绑定点击事件触发动态对象方法失败如何解决

你当前绑定失败的核心原因是：options数组中action属性存储的是字符串格式的方法调用语句，Angular事件绑定不会自动解析执行字符串内容，只有直接绑定组件方法/可执行函数引用才能触发调用。

方案1：直接存储函数引用（最推荐） #

直接把方法引用绑定到action属性，避免字符串解析的问题，注意要绑定this指向当前组件实例，否则方法内无法访问注入的ModalController等服务。

TS代码修改 #

options = [
    {
      id: '0',
      icon: 'assets/icons/set-comparison.svg',
      text: 'Set Comparison',
      action: this.setComparison.bind(this) // 绑定this后存储方法引用
    },
    // 其余选项按相同逻辑修改
];

HTML代码修改 #

<img 
  [attr.src]="_measures.selectedMeasure.id === 'i' ? item.icon : item.icon2" 
  class="sidebar__content custom__icon" 
  (click)="item.action()">

如果需要阻止点击事件冒泡到外层按钮的click事件，可修改点击事件为：

(click)="item.action(); $event.stopPropagation()"

方案2：通过字符串动态调用方法 #

如果你需要保留字符串格式的方法配置，可新增一个统一的事件处理方法，通过方法名动态调用。

TS代码修改 #

1. 先把action的配置改为仅方法名，去掉括号：

options = [
    {
      id: '0',
      icon: 'assets/icons/set-comparison.svg',
      text: 'Set Comparison',
      action: 'setComparison' // 仅存储方法名
    },
    // 其余选项按相同逻辑修改
];

2. 新增统一处理方法：

handleAction(item: any) {
  if (typeof this[item.action] === 'function') {
    this[item.action]();
  }
}

HTML代码修改 #

<img 
  [attr.src]="_measures.selectedMeasure.id === 'i' ? item.icon : item.icon2" 
  class="sidebar__content custom__icon" 
  (click)="handleAction(item)">

内容的提问来源于stack exchange，提问作者Jesus