Angular 2环境中新增按钮触发paymentDetails报未定义错误求助

这是Angular开发里非常常见的一个小坑——你用了原生DOM的onclick属性来绑定方法，但Angular组件的方法是挂载在组件实例上的，并不存在全局的window.paymentDetails，所以浏览器找不到这个函数，就抛出了ReferenceError。

下面是具体的解决步骤：

• 替换原生事件绑定为Angular模板语法
  把HTML按钮里的onclick="paymentDetails()"改成Angular标准的事件绑定语法(click)="paymentDetails()"。这是Angular专门设计的模板绑定方式，它会直接关联到你组件类里定义的方法，而不是去全局作用域查找。
  修改后的按钮代码示例：

  <mat-raised-button (click)="paymentDetails()" color="primary">查看支付详情</mat-raised-button>
  

• 确认组件方法的访问权限与拼写
  你已经把paymentDetails()声明为public，这是正确的——Angular模板默认只能访问组件的公共成员。不过可以快速检查下方法名的拼写（包括大小写）是否和模板里的完全一致，有时候笔误也会导致这类问题。

• 排查模板上下文是否正确
  如果这个按钮是放在ng-template、*ngIf或者*ngFor这类结构指令内部，要确保它没有脱离当前组件的上下文。比如如果按钮被嵌套到了另一个组件的模板中，它会尝试去那个组件的类里找方法，自然会找不到。

• 额外检查：严格模式下的变量/方法定义
  如果你的项目开启了Angular严格模式，确保paymentDetails()方法在组件类里确实有完整的定义（比如没有漏写函数体或者类型声明），不过这个在你的案例里应该不是主要问题。

核心原因就是原生DOM事件绑定和Angular模板绑定的作用域不同：原生onclick会在全局window对象中查找函数，而Angular的(click)绑定是直接指向当前组件实例的方法。换用Angular的绑定方式后，这个问题应该就能解决了。

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