Javascript 角度2-英雄之旅：仅选择<；李>；

我正在浏览angular 4项目“英雄之旅”的文档

{{hero.name}

这里是当我选择任何英雄时发生的情况，函数

onSelect（）

启动并传递特定的“英雄”对象，然后它分配给

selectedHero

，以使用

此功能显示特定信息

我想知道关于“英雄”的特定信息是如何获得的（这样我们就可以通过
onSelect（）
函数传递它），只需选择“英雄”
不完全确定您在哪里感到困惑，但让我们来分解这一行正在做什么

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

{{hero.name}

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

在更清晰的步骤中，*ngFor语句看到了这句话“让英雄中的英雄”
这句话的意思是，对于数组中的每个变量heroes，都会创建一个新的
元素。然后，在创建的
元素的范围内，它创建一个变量“hero”，该变量引用heros数组中相应的变量。此“hero”变量只能在创建的
元素中使用和引用

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

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

{{num}

它会打印出来

1

五,

七,

8

因为每个

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

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

之所以可以在调用“ngFor”的同一个元素标记中引用这个局部变量“hero”，是因为Angular中有一些模板魔法。*符号实际上跳到调用它的元素外部，并创建一个模板。您可以在此处阅读更多关于*和NGF利用率的信息：

---

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

文档在这里解释了所有这些，这在本教程中非常简单well@user3526127Could请你解释一下。我不熟悉Javascript和Angular。在文档中，传递了“hero”对象，但我想知道后面发生了什么。我的意思是在选择特定的“李”时，我们也会得到“英雄”对象。。。但是怎么做呢？不确定我是否完全理解你的问题，但是

（点击）

是一个点击事件。这意味着，当您单击事件附加到的html元素时，它将触发指定的函数。该元素具有每个英雄的数据，因为*ngFor引用的是存在于typescript中的现有

英雄

数组*ngFor就像一个for循环，所以这里的英雄是指每个英雄，其中包含数据。单击元素时，此数据将传递到选择上的

是这是我想知道的事情。。。那个特定的“李”是否包含个人英雄的数据？但在控制台中，若我们通过getQuerySelector获取数据，我就找不到那个些数据。您能告诉我如何在控制台中显示数据吗？太好了。。。现在我可以清楚地了解整个事情了。。。如果我们用任何对象代替数组，我们可以通过插值{{}中相应的
得到属性值。谢谢你，拉尔斯。。。很清楚
<li *ngFor="let num of myNumArray" (click)="console.log(num)">{{num}}</li>