如何在Angular模板中向TypeScript函数传递参数

问题原因 #

你使用了错误的Angular点击事件绑定语法：Angular模板中绑定原生点击事件不需要加on前缀，你写的(onclick)是原生HTML的事件属性写法，在Angular框架下无法正常触发，也不能正确读取遍历上下文里的user.id变量。

修正后的代码 #

<ng-container *ngFor="let user of users">
  <button (click)="getdata(user.id)" mat-raised-button color="primary">{{user.name}}</button>
</ng-container>

补充校验点 #

• 确认你的组件.ts文件中已经声明了getdata方法，可正常接收id参数，示例写法参考：

// 组件类中
getdata(userId: number | string): void {
  // 此处写调用接口查询对应用户详情的逻辑
}

• 确认users数组已经完成赋值，每个数组元素都存在id和name属性，避免属性不存在导致的取值报错。

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