Was bedeutet * in * ngFor in angular2?

Question

Was bedeutet * vor ngFor im folgenden Beispiel und warum wird es benötigt?

<div *ngFor="#hero of heroes" (click)="selectHero(hero)"> 
    {{hero.name}} 
</div> 

Answer 1

ngFor kann nur auf eine <template> angewendet werden. *ngFor ist die Kurzform, die auf jedes Element angewendet werden kann und das <template> Element wird implizit hinter der Szene erstellt.

https://angular.io/docs/ts/latest/api/common/index/NgFor-directive.html

Syntax

• <li *ngFor="let item of items; let i = index">...</li>
• <li template="ngFor let item of items; let i = index">...</li>
• <template ngFor let-item [ngForOf]="items" let-i="index"><li>...</li>

Es ist das gleiche Muster für alle structural directives

Plunker example

Update

Mit dem 2.0.0 Final Release <ng-container> eingeführt wurde, die wie <template> (ein Wrapper-Element verhält, die nicht tatsächlich hinzugefügt das DOM) unterstützt aber die *ngFor="..." Syntax.

Answer 2

Zitat aus der offiziellen Angular Dokumentation:

Wenn wir die NgFor und NgIf Einbau-Richtlinien überprüft, wir riefen eine Kuriosität der Syntax: das Sternchen (*), die vor der Richtlinie erscheint Name.

Die * ist ein bisschen syntaktischer Zucker, der es leichter zu lesen und schreibt Direktiven, HTML-Layout mit Hilfe von Vorlagen zu ändern. , NgIf und NgSwitch alle hinzufügen und entfernen Element Unterbäume, die in <template> Tags eingewickelt sind.

Für weitere Details klicken Sie bitte auf https://angular.io/docs/ts/latest/guide/template-syntax.html#!#star-template

* ngFor hat vier Eigenschaften: Index, letzte, sogar und ungerade. Wir können den Wert des Indexes pro Iteration, den letzten Wert, den ungeraden oder sogar den Index selbst unter Verwendung lokaler Variablen ermitteln. Hier ist ein Arbeitsbeispiel:

demoArray= [1,2,3,4,5,6,7,8,8,9]; 
<ul> 
    <li *ngFor='#item of demoArray #i=index #l=last #e=even'> 
    Item value is : {{item}} has index value is : {{i}} and last value is :{{l}} even index :{{e}}</li> 
</ul> 

Answer 3

Wenn Angular sieht das Sternchen (*) in ngFor, wird es sein DOM-Element als Vorlage verwenden, um die Schleife zu machen.

<div *ngFor="#hero of heroes"> 
    {{ hero.name }} 
</div> 

entspricht

<template ngFor #hero [ngForOf]="heroes"> 
    <div> 
     {{ hero.name }} 
    </div> 
</template> 

Answer 4

Sie werden als Struktur Richtlinien bekannt, da sie die Fähigkeit haben, die DOM-Struktur zu ändern. Für weitere Informationen können Sie https://angular.io/guide/structural-directives besuchen.

Answer 5

In *ngFor ist das * eine Abkürzung für die Verwendung der neuen eckigen Vorlagensyntax mit einem Template-Tag, dies wird auch als strukturelle Richtlinie bezeichnet. Es ist hilfreich zu wissen, dass * nur eine Kurzform ist, um die Datenbindungen auf einer Vorlage explizit zu definieren Etikett.