Angular中ReferenceError求助：dosomeshit函数未定义

为什么原生onclick会报错？ #

原生onclick是浏览器层面的事件绑定，执行上下文是全局window对象，而你在组件类里定义的dosomeshit方法属于组件实例的成员，全局上下文找不到这个方法，所以会抛出Uncaught ReferenceError: dosomeshit is not defined。

改用Angular的(click)绑定后无响应的可能原因及解决方法 #

你需要逐一排查以下几点：

1. 使用正确的Angular事件绑定语法
   把按钮的onclick替换成Angular标准事件绑定：

   <button type="button" (click)="dosomeshit(stringelement)">
       <fa-icon class="fa-1x" [icon]="faPlus"></fa-icon>
   </button>
   

2. 确认组件方法的访问权限
   组件类里的dosomeshit方法默认是public，如果手动加了private修饰符，模板将无法访问它，确保方法定义没有私有修饰：

   dosomeshit(stringelement: string): void{
       console.log("reached function: " + stringelement);
   }
   

3. 确认elements数组已正确初始化
   如果elements数组为空，*ngFor不会渲染任何列表项，按钮根本不存在自然无法触发点击。在组件的ngOnInit钩子中给数组赋值：

   import { OnInit } from '@angular/core';
   
   export class YourComponent implements OnInit {
       elements: string[] = [];
   
       ngOnInit(): void {
           // 示例：初始化数组数据
           this.elements = ["测试项1", "测试项2"];
       }
   
       dosomeshit(stringelement: string): void{
           console.log("reached function: " + stringelement);
       }
   }
   

4. 检查变量名冲突
   确保组件类中没有和模板循环变量stringelement同名的属性，避免上下文混淆导致参数传递异常。

5. 排查变更检测问题（可选）
   如果组件使用了ChangeDetectionStrategy.OnPush，需要确保数组变更时触发变更检测，比如用this.elements = [...this.elements, 新元素]的方式更新数组，而不是直接修改原数组。

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