javascript - 事件绑定(bind)如何与传入的值一起使用

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

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

哪里

selectedHero: Hero;

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

我不明白（英雄）是从哪里来的，也不知道如何加载哪些数据

最佳答案

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

ngFor指令：是一种通过使用iterable的每个项目作为模板上下文来重复模板的方法。

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

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

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

可能是，加载了Array并调用了一个特定的服务来加载heroes，这是每个组件加载要呈现的必要数据时必须做的第一件事。

在组件HeroesComponent中，有关heroes的数据声明如下：

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' }
];

关于javascript - 事件绑定(bind)如何与传入的值一起使用，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/48045440/