Angular 2 - 英雄之旅：仅通过选择 <li> 来获取对象信息

Question

我正在浏览 Angular 4 项目“英雄之旅”https://angular.io/docs/ts/latest/tutorial/toh-pt2.html 的文档。

<li *ngFor="let hero of heroes" (click)="onSelect(hero)">{{hero.name}}</li>

当我选择任何 HERO 时会发生什么，函数 onSelect() 启动并传递特定的“英雄”对象，然后它分配给 selectedHero 以使用 this 功能显示该特定信息。

我想通过仅选择 HERO 来了解我们如何获得有关“英雄”的特定信息（以便我们可以通过 onSelect() 函数传递它）

Answer 1

不完全确定你在哪里感到困惑，但让我们分解一下这条线在做什么。

<li *ngFor="let hero of heroes" (click)="onSelect(hero)">{{hero.name}}</li>

首先，*ngFor 命令创建多个列表元素，其长度等于“英雄”数组的长度。这是使用 Angular 的结构指令完成的。

在更清晰的步骤中，*ngFor 语句查看这一行“让英雄成为英雄”。 这条语句的意思是，对于数组中的每个变量，英雄，都会创建一个新的

元素。然后，在所创建的

元素

的范围内，创建一个变量“hero”，该变量引用了英雄数组中的相应变量。这个“英雄”变量只能在创建的

元素中使用和引用。

例如，如果你有一个这样的数组：myNumArray = [1,5,7,8]， 你有一个这样的列表

<li *ngFor="let num of myNumArray" (click)="console.log(num)">{{num}}</li>

它会打印出来

1

5

7

8

因为每个

元素中的“num”变量引用了 myNumArray 的相应变量，该变量是在使用 *ngFor 创建元素时分配的。此外，每个

元素都会有一个点击事件，将 其 num 实例 记录到控制台。单击 1 将记录“1”，单击 5 将记录“5”，依此类推。

您可以在调用“ngFor”的同一元素标记中引用此局部变量“hero”的原因是因为Angular中的一些模板魔法。 * 符号实际上跳到了调用它的元素外部并创建了一个模板。您可以在此处阅读有关 * 和 ngFor 使用的更多信息：https://angular.io/guide/structural-directives#the-asterisk--prefix

希望这能回答您的问题并解释每个特定的“英雄”信息是如何创建的，以及它们之间的区别。