javascript - 事件绑定(bind)如何处理传入的值

Question

我是事件绑定(bind)的新手，我无法理解为什么以及如何在 () 中传递值并加载其值。我正在关注 Angular tutorial哪一部分

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

哪里

selectedHero: Hero;

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

我无法理解(英雄)从哪里来，也不知道如何加载哪些数据

Answer 1

hero 对象来自 *ngFor="let Hero of Heros"。

ngFor 指令: 是一种通过使用可迭代对象的每个项目作为模板的上下文来重复模板的方法。

英雄的每个循环都将使用特定的 hero 对象，并创建一个 li 元素，该元素将使用 (click)="onSelect( 绑定(bind) onClick 事件)英雄)”。

如您所见，onSelect 方法在您的组件中声明为 onSelect(hero: Hero): void 此声明允许您在组件中的任何位置使用它组件的选择器。

另一方面，heroes 对象是一个hero 类型的数组，并且将在您的组件中预先加载。

可能，该数组是通过调用特定服务来加载英雄来加载的，这是每个组件为加载将要呈现的必要数据而必须做的第一件事之一。

在组件HeroesComponent中，有关英雄的数据声明如下:

heroes = HEROES;

在该教程中，heroes 数据由该文件 mock-heroes.ts 提供，其内容如下:

import { Hero } from './hero';

export const HEROES: Hero[] = [
  { id: 11, name: 'Mr. Nice' },
  { id: 12, name: 'Narco' },
  { id: 13, name: 'Bombasto' },
  { id: 14, name: 'Celeritas' },
  { id: 15, name: 'Magneta' },
  { id: 16, name: 'RubberMan' },
  { id: 17, name: 'Dynama' },
  { id: 18, name: 'Dr IQ' },
  { id: 19, name: 'Magma' },
  { id: 20, name: 'Tornado' }
];