角2-英雄之旅:对象信息是如何通过选择<li>来实现的

Question

我正在通过文件的角4项目“英雄之旅”https://angular.io/docs/ts/latest/tutorial/toh-pt2.html。

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

在这里，当我选择任何英雄时，函数onSelect()启动并传递特定的“英雄”对象，然后它指定给selectedHero使用this功能来显示特定的信息。

我想知道我们是如何获得关于“英雄”的特殊信息的(这样我们就可以通过onSelect()函数传递它)，只选择那个英雄。

Answer 1

不完全确定您在哪里感到困惑，但让我们详细分析一下这一行在做什么。

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

首先，*ngFor命令创建许多与“英雄”数组长度相等的列表元素。这是用角的结构指令来完成的。

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

例如，如果您有这样一个数组: myNumArray = 1,5,7,8，并且有这样的列表

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

它会打印出来

​

• 1
• 5
• 7
• 8

​

因为每个< li >元素中的"num“变量引用的是创建元素时分配给*ngFor的myNumArray的相应变量。此外，每个< li >元素都有一个单击事件，该事件将其num实例记录到控制台。点击1，会记录"1“，点击5就会记录"5”，以此类推。

您可以在调用"ngFor“的元素标记中引用这个局部变量”英雄“的原因是由于某种角度上的模板魔术。*符号实际上在调用它的元素的外部跳开，并创建一个模板。您可以在这里阅读更多关于*和ngFor的使用情况：https://angular.io/guide/structural-directives#the-asterisk--prefix

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