Was ist der Unterschied zwischen ng-if und * ng-if in angular2

Question

Ich versuche den Unterschied zwischen ng-if und * ng-if zu verstehen, aber sie sehen für mich gleich aus.

Gibt es einen Unterschied, den ich im Hinterkopf behalten sollte und wann diese Anweisungen zu verwenden sind?

Answer 1

ngIf ist die Richtlinie. Da es sich um eine Strukturanweisung handelt (vorlagenbasiert), müssen Sie das Präfix * verwenden, um es in Vorlagen zu verwenden.

*ngIf entspricht der Abkürzung für die folgende Syntax ("syntaktischer Zucker"):

<template [ngIf]="condition"> 
    <p> 
    Our heroes are true! 
    </p> 
</template> 

Entspricht:

<p *ngIf="condition"> 
    Our heroes are true! 
</p> 

Sehen Sie dieses Dokument für weitere Informationen:

• https://angular.io/docs/ts/latest/guide/structural-directives.html

Answer 2

Der Unterschied ist, dass beide in Angular2 nicht unterstützt werden ;-) zumindest in aktuellen Versionen - es sollte *ngIf oder ngIf sein.

Strukturelle Direktiven können mit expliziten <template> Tags oder implizit <template> Tags verwendet werden. Für die implizite Version ist eine * erforderlich, um anzuzeigen, dass es sich um eine strukturelle Richtlinie handelt.

explizite

<template [ngIf]="someExpr"> 
    <div>content</div> 
</template> 

oder seit 2.0.0 bevorzugt

<ng-container *ngIf="someExpr"> 
    <div>content</div> 
</ng-container> 

implizite

<div *ngIf="someExpr"></div> 

der Regel werden Sie die implizite Version zu verwenden, da es prägnanter ist.

Wann die explizite Version verwenden?

Es gibt Anwendungsfälle, in denen die implizite Version nicht funktioniert.

• Wenn Sie mehr als eine Strukturrichtlinie wie ngForundngIf anwenden möchten, die nicht unterstützt wird, dann können Sie die explizite Form für eine diese verwenden.

Anstelle dieser ungültige Syntax

<div *ngFor="let item of items" *ngIf="!item.hidden"></div> 

Sie

<ng-container *ngFor="let item of items"> 
    <div *ngIf="!itemHidden></div> 
</ng-container> 

• verwenden Wenn Sie die Strukturrichtlinie zu mehr als einem Element

anwenden möchten Für Beispiel möchten Sie mehrere Artikel auflisten w mit name und price pro Reihe

<tr> 
    <td *ngFor="???">item.name</td> 
    <td>item.price</td> 
</tr> 

<tr> 
    <ng-container *ngFor="let item of items"> 
    <td>item.name</td> 
    <td>item.price</td> 
    </ng-container> 
</tr>