Angular事件绑定参数传递机制及数据来源疑问咨询

嘿，作为Angular新手，这个点确实容易懵，我来一步步给你拆解清楚：

1. *ngFor是怎么创建局部变量hero的？ #

首先看模板里的这段代码：

<li *ngFor="let hero of heroes" (click)="onSelect(hero)">

*ngFor是Angular的结构型指令，它的作用就是遍历组件里的heroes数组，为数组里的每一个元素创建一个<li>元素。

这里的let hero of heroes是模板语法的写法：

• heroes是你组件类里定义的数组（可能是直接初始化的，或者从服务获取的数据源）
• let hero相当于在每次循环时，把当前遍历到的数组元素赋值给一个名为hero的局部模板变量，这个变量只在当前这个<li>的范围内有效。

简单说：循环到第一个英雄，hero就是第一个英雄对象；循环到第二个，hero就是第二个，以此类推。

2. 点击事件里的hero参数是怎么传递的？ #

当你点击某个<li>时，Angular会触发(click)绑定的onSelect方法，这时候我们把当前<li>对应的局部变量hero作为参数传进去。

组件类里的onSelect方法接收这个参数：

selectedHero: Hero;
onSelect(hero: Hero): void {
  this.selectedHero = hero;
}

这样，点击哪个<li>，对应的英雄对象就会被赋值给组件的selectedHero属性，实现了“点击选中英雄”的效果。

3. 数据加载的逻辑梳理 #

整个流程是这样的：

• 组件初始化时，heroes数组被填充数据（可能是组件内部直接定义，比如heroes = [{id:1, name:'钢铁侠'}, ...]，或者通过HTTP请求从后端获取）
• *ngFor遍历heroes数组，为每个元素生成<li>，并为每个<li>绑定当前元素的hero局部变量
• 用户点击某个<li>，Angular调用onSelect(hero)，把当前的hero对象传递给组件方法
• 组件把传入的hero赋值给selectedHero，后续你就可以在模板里用{{selectedHero.name}}这类写法展示选中的英雄信息了

是不是一下子清晰多啦？

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