私は英雄の配列を通してどのように* ngForが反復しているのか理解できません

Question

output should be like
プログラムの出力は、このスクリーンショットのようにする必要があります。なぜ私の配列名がヒーローだから{{ヒーロー}}の代わりに{{ヒーロー}}？

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 < =そのためです。 heroは、配列heroesで処理されている現在の要素の値です。

また、NgForOfのマニュアルとForeach Loopの情報も参照してください。

Answer 2

ディレクティブのアスタリックス構文（この場合はngForOf-directive）を使用しています。 ng-templateに要素をラップngFor指令選択の前に

*：

アスタリスク構文は、以下のように翻訳されます。

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

---

let variableNameimplicit$コンテキストの名前variableNameとローカルテンプレート変数を作成：

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

---

変数宣言の間の文字列と入力、この場合はですは、ディレクティブセレクタに追加されます。

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

let heroは、したがって、あなたは、テンプレート内のローカルテンプレート変数heroを使用することができ、let-heroに翻訳されステップでは、ngForOfディレクティブはそれに現在の配列の要素を結合し。