Question

output should be like
程序的输出应该像在这个截图中。为什么{{hero}}而不是{{heroes}}作为我的数组名称是英雄？

template: `
      <h1>{{title}}</h1>
      <h2>My favorite hero is: {{myHero}}</h2>
      <p>Heroes:</p>
      <ul>
        <li *ngFor="let hero of heroes"> 
          {{ hero }}
        </li>
      </ul>
    `
    export class AppComponent  { name = 'Angular';
     title : string ;
     heroes = ['Windstorm','Bombasto','Magneta','Tornado'];
      myhero = this.heroes[0] ; 

    constructor()
    {
    this.title = 'Tour Of Heroes';
    }
    }

Answer 1

let hero＆lt; =因为那个。 hero是heroes数组中正在处理的当前元素的值。

另请参阅NgForOf文档和Foreach Loop基本信息。

Answer 2

您正在使用指令的asterix语法（在本例中为ngForOf-directive）。

asterix语法按以下方式翻译：

1 指令选择器*前面的ngFor将元素包装为ng-template。

<ng-template [ngFor]="let hero of heroes">
  <li>
    {{ hero }}
  </li>
</ng-template>

2 let variableName为variableName上下文创建名为implicit$的本地模板变量：

<ng-template [ngFor]="of heroes" let-hero>
  <li>
    {{ hero }}
  </li>
</ng-template>

3 变量声明和输入之间的字符串，在这种情况下它的of附加到指令选择器：

<ng-template [ngForOf]="heroes" let-hero>
  <li>
    {{ hero }}
  </li>
</ng-template>

在步骤 2 中，let hero被翻译为let-hero，因此您可以在模板中使用本地模板变量hero {{3} }指令将当前数组元素绑定到它。

我无法理解* ngFor是如何迭代英雄数组的

2 个答案: