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

我是 Angular 2 的新手，我对 JavaScript\TypeScript(我来自 Java)并不那么感兴趣，我对我正在研究的一个示例有一些疑问，该示例与组件如何使用另一个组件中定义的属性有关事件绑定(bind))。该示例展示了如何在父组件中使用和显示在子组件中声明的元素数组。

所以我有 应用程序组件 ，它是 父组件 。

这是名为 app-component.html 的 应用组件 “ View ”:

<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 类中的 serverElements 数组开始生成 app-server-element (我的应用程序的另一个组件及其布局)，这个:

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.strong server-element. 上迭代ts 类(与 组件相关)。

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

是还是我错过了什么？

最佳答案

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

关于javascript - 在这个例子中，Angular *ngFor 究竟是如何工作的？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/44521677/