在此示例中，Angular * ngFor的工作原理如何? [英] How exactly works the Angular *ngFor in this example?

问题描述

我在Angular 2中是一个新手，但对JavaScript \ TypeScript(我来自Java)却不是那么熟悉，并且我对我正在研究的示例如何与某个组件如何使用另一个组件中定义的属性有关的内容表示怀疑. (属性\事件绑定).该示例说明了如何使用子组件中声明的元素数组并在父组件中显示.

I am pretty new in Angular 2 and I am not so into JavaScript\TypeScript (I came from Java) and I have some doubt about an example that I am studying related how to a component can use a property defined in another component (property\event binding). The example show how an array of element declared in a child component can be used and shown in the parent 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>

根据我无法理解的代码，从 serverElements 数组开始，生成 app-server-element (应用程序的另一个组件及其布局). app.component.ts 类，这一类:

From what I can undestand this code generate app-server-element (another component of my application with its layout) starting from the serverElements array that is defined into the app.component.ts class, this one:

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'}];
}

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

So here I have a this first doubt: doing:

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

* ngFor 指令在 app.component.ts 类(与主类相关)中定义的 serverElements 数组上进行迭代. 应用程序组件组件)，而不是 server-element.component.ts 类(与 组件相关).

The *ngFor directive is iterating on the serverElements array that is defined into the app.component.ts class (related to the main app-component component) and not on the server-element.component.ts class (related to the component).

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

It works fine but it seems to me a little strange. Why? My idea is that this *ngFor directive is declared into the HTML code of the app-component.html related to the , so the iteration is on an array that is defined in the related class.

是还是我缺少什么?

推荐答案

在成角度的情况下，当您编写一个指令之前加一个星号时，该星号实际上是更复杂结构的语法糖.对于*ngFor，文档给出了以下示例:

In angular, when you write a directive preceded by an aserisk that is actually syntactic sugar for a more complex structure. For *ngFor, the documentation gives this example:

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

Then the template attribute is extracted out to an ng-template directive wrapping the element that contained the original *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>

您的代码也会进行相同的重写:

The same rewriting happens with your code:

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

实际上只是以下内容的简写:

is actually just a shorthand for:

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

从ngFor的扩展形式开始，现在显然应该完全在app-server-element组件之外引用serverElements.

From the expanded form of the ngFor it should now be obvious that serverElements is referenced entirely outside the app-server-element component.

这篇关于在此示例中，Angular * ngFor的工作原理如何?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！