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

Question

我是 Angular 2 的新手，我对 JavaScript\TypeScript（我来自 Java）不太感兴趣（属性\事件绑定）。该示例展示了如何使用在子组件中声明的元素数组并在父组件中显示。

所以我有 app-component，它是 父组件。

这是名为app-component.html的app-component“视图”：

<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>

据我所知，此代码从定义到app.component.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>

*ngFor 指令正在迭代 serverElements 数组，该数组定义在 app.component.ts 类中（与主app-component 组件）而不是 server-element.component.ts 类（与 组件相关）。

它工作正常，但在我看来有点奇怪。为什么？我的想法是把这个*ngFor指令声明到相关的app-component.html的HTML代码中，所以迭代是在相关类中定义的数组上。

是不是我错过了什么？

Answer 1

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

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

*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 组件之外被引用。