2016-10-20 2 views
4

Ich kann nirgendwo eine gute Beschreibung der Unterschiede finden. Das Gleiche gilt für *ngIf und ngIfWas ist der Unterschied zwischen ngFor und * ngFor

Ein Beispiel für *ngFor

<li *ngFor="let video of page" ...> 
    <img src="api/Videos/{{video.id}}/thumbnail"> 
</li> 

und ein Beispiel für ngFor

<template ngFor let-labelid [ngForOf]="labelLookup | keyValueFilter" > 
    <label [ngStyle]="{'background-color': labelLookup[labelid].color}"> 
    <input (click)="changeLabel(labelid)" type="radio" name="labelSelector" value="{{ labelid }}" [checked]="labelid == 1"> 
    </label> 
</template> 
+1

'* ngFor' ist eine Abkürzung von' ngFor' mit 'template', Sie das gleiche auf Winkel docs finden & teropa blog [hier] (https://teropa.info/blog/2016/03/06/writing-an-angular-2-template-directive.html) –

Antwort

4

Der Unterschied besteht darin, dass zu *ngFor<template ngFor [ngForOf]="..." intern umgewandelt wird.

Sie sind gleichwertig, aber ersteres ist bequemer zu schreiben.

Die explizite Version (<template ngFor ...>) erlaubt es, die Direktive auf mehrere Elemente gleichzeitig anzuwenden, während die implizite Version (Kurzschrift) nur das Element, auf das es angewendet wird, mit dem Tag <template> umschließt.

Mit Angular 2.0.0 final wurde das Element <ng-container> hinzugefügt, mit dem die Kurzschreibensyntax für ein Element verwendet werden kann, das sich wie das Element <template> verhält (wird nicht zum DOM hinzugefügt).

Siehe auch