Question

我是事件绑定的新手，我无法理解为什么以及如何在()中传递值并加载其值。我正在关注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 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' }
];

Answer 2

基于这段代码，我可以假设这个组件是在一个名为heroes的数组的类中实现的。最有可能在您的组件模板中有一个列表，例如<ul>。 *ngFor指令遍历数组heroes并为每个数组元素创建一个<li>元素。变量hero仅用于遍历数组，您可以将其命名为任何内容。

循环完成后，每个<li>的值都是数组中Hero的一个实例，每个<li>都有一个点击侦听器。当您单击列表元素（<li>）时，将调用方法onClick，并在循环期间传递分配给此列表元素的任何英雄实例。

事件绑定如何与传入的值

2 个答案: