在这个例子中 Angular *ngFor 究竟是如何工作的？

我对 Angular 2 很陌生，对 JavaScript\TypeScript 不太感兴趣（我来自 Java），并且我对我正在研究的一个示例有一些疑问，该示例涉及组件如何使用另一个组件中定义的属性（属性\事件绑定）。该示例展示了如何在父组件中使用和显示在子组件中声明的元素数组。

所以我有应用程序组件那就是父组件.

这是应用程序组件“视图”命名应用程序组件.html:

<div class="container">
  <app-cockpit></app-cockpit>
  <hr>
  <div class="row">
    <div class="col-xs-12">
      <app-server-element
        *ngFor="let serverElement of serverElements"
        [element]="serverElement"></app-server-element>
    </div>
  </div>
</div>

据我所知，这段代码生成应用程序服务器元素（我的应用程序的另一个组件及其布局）从服务器元素数组被定义到应用程序组件.ts类，这个：

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  serverElements = [{type: 'server', name: 'TestServer', content: 'Just a Test'}];
}

所以在这里我有第一个疑问：做：

<app-server-element
    *ngFor="let serverElement of serverElements"
    [element]="serverElement">
</app-server-element>

The *ngFor指令正在迭代服务器元素数组被定义到应用程序组件.ts类（与主要相关应用程序组件组件）而不是在服务器元素.component.ts类（与成分）。

它工作得很好，但在我看来有点奇怪。为什么？我的想法是这个*ngFor指令被声明到 HTML 代码中应用程序组件.html相关于，因此迭代是在相关类中定义的数组上进行的。

是我遗漏了什么吗？

在 Angular 中，当您编写前面带有 aserisk 的指令时，它实际上是更复杂结构的语法糖。为了*ngFor, the 文档给出这个例子：

<div *ngFor="let hero of heroes; let i=index; let odd=odd; trackBy: trackById" [class.odd]="odd">
  ({{i}}) {{hero.name}}
</div>

The *ngFor首先被重写为template属性：

<div template="ngFor let hero of heroes; let i=index; let odd=odd; trackBy: trackById" [class.odd]="odd">
  ({{i}}) {{hero.name}}
</div>

然后template属性被提取到ng-template指令包装包含原始元素的元素*ngFor.

<ng-template ngFor let-hero [ngForOf]="heroes" let-i="index" let-odd="odd" [ngForTrackBy]="trackById">
  <div [class.odd]="odd">({{i}}) {{hero.name}}</div>
</ng-template>

您的代码也会发生同样的重写：

<app-server-element
    *ngFor="let serverElement of serverElements"
    [element]="serverElement">
</app-server-element>

实际上只是以下的简写：

<ng-template ngFor let-serverElement [ngForOf]="serverElements">
    <app-server-element [element]="serverElement"></app-server-element>
</ng-template>

从展开的形式来看ngFor现在应该很明显serverElements完全在外部引用app-server-element成分。