Javascript 在本例中，角度*ngFor的具体工作原理是什么？

我是Angular 2的新手，对JavaScript\TypeScript（我来自Java）不太熟悉，我对我正在研究的一个示例有一些疑问，该示例涉及如何使用在另一个组件中定义的属性（属性\事件绑定）。该示例显示了如何使用在子组件中声明的元素数组，以及如何在父组件中显示该数组

因此，我有应用程序组件，即父组件

这是名为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-server-element
    *ngFor="let serverElement of serverElements"
    [element]="serverElement">
</app-server-element>

*ngFor指令在定义到app.component.ts类（与主app component组件相关）的server ELEMENTS数组上迭代，而不是在server element.component.ts类（与组件相关）上迭代

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

---

是它还是我遗漏了什么？

在angular中，当你写一个指令，前面有一个aserisk，它实际上是一个更复杂结构的语法糖。对于

*ngFor

，给出了以下示例：

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

（{{i}}）{{hero.name}

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

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

组件之外引用。

循环属于父组件（app-concomponent），它呈现N个子组件（服务器组件），从父组件传递属性

元素

==数组的每个元素。视图属于父组件，因此它只能使用来自父脚本的数据。好的，您的回答澄清了任何疑问

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