javascript - How exactly works the Angular *ngFor in this example? - Stack Overflow

admin管理员组

文章数量:1346676

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 ponent can use a property defined in another ponent (property\event binding). The example show how an array of element declared in a child ponent can be used and shown in the parent ponent.

So I have the app-ponent that is the parent ponent.

This is the app-ponent "view" named app-ponent.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>

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

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

@Component({
  selector: 'app-root',
  templateUrl: './appponent.html',
  styleUrls: ['./appponent.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>

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

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-ponent.html related to the , so the iteration is on an array that is defined in the related class.

Is it or am I missing something?

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 ponent can use a property defined in another ponent (property\event binding). The example show how an array of element declared in a child ponent can be used and shown in the parent ponent.

So I have the app-ponent that is the parent ponent.

This is the app-ponent "view" named app-ponent.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>

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

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

@Component({
  selector: 'app-root',
  templateUrl: './app.ponent.html',
  styleUrls: ['./app.ponent.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>

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

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-ponent.html related to the , so the iteration is on an array that is defined in the related class.

Is it or am I missing something?

• javascript
• angular
• typescript

Share Improve this question Follow asked Jun 13, 2017 at 12:33 AndreaNobiliAndreaNobili 43.1k122122 gold badges361361 silver badges681681 bronze badges 1

• 1 The loop belongs to parent ponent (app-conmponent), and it renders N number of child ponents (server-whatever), passing a prop element === each element of the array from parent ponent. The view belongs to parent ponent, so it can use data only from parent script. – Egor Stambakio Commented Jun 13, 2017 at 12:44

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 8

In angular, when you write a directive preceded by an aserisk that is actually syntactic sugar for a more plex 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>

The *ngFor is first rewritten to a template attribute:

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

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>

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

本文标签： javascriptHow exactly works the Angular *ngFor in this exampleStack Overflow