webentwicklung-frage-antwort-db.com.de

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

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 berücksichtigen sollte, wenn ich eine über die andere wähle und wann ich diese Richtlinien anwenden soll?

javascriptangularangular-ng-if
17
ShellZero

ngIf ist die Direktive. Da es sich um eine strukturelle Direktive (vorlagenbasiert) handelt, 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>

Gleichwertig:

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

Weitere Informationen finden Sie in diesem Dokument:

21
Thierry Templier

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 impliziten <template>-Tags verwendet werden. Für die implizite Version ist ein * erforderlich, um anzuzeigen, dass es sich um eine strukturelle Anweisung handelt.

explizit 

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

oder seit 2.0.0 bevorzugt

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

implizit 

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

Normalerweise verwenden Sie die implizite Version, da sie übersichtlicher ist.

Wann die explizite Version verwenden?

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

  • Wenn Sie mehrere Strukturanweisungen wie ngFor und ngIf anwenden möchten, die nicht unterstützt werden, können Sie das explizite Formular für eine davon verwenden.

Anstelle dieser ungültigen Syntax

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

sie können verwenden

<ng-container *ngFor="let item of items">
  <div *ngIf="!itemHidden></div>
</ng-container>
  • Wenn Sie die strukturelle Direktive auf mehrere Elemente anwenden möchten

Sie möchten beispielsweise mehrere Elemente mit name und price pro Zeile auflisten

<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>
8
Günter Zöchbauer

Um es einfach zu halten, in den neuesten eckigen Versionen, zum Beispiel wenn wir * ngIf wie unten verwenden.

<div *ngIf = "condition">
//code here
</div>

Nun wird der obige Code von angle wie folgt gerendert:

<ng-template [ngIf]="condition">
<div>
//code here
</div>
</ng-template>

Daher können wir * ngIf entweder direkt als strukturelle Direktive verwenden oder [ngIf] als Attribut-Direktive, jedoch mit einer ng-Vorlage. Ich hoffe, das macht die Dinge klarer.

0
Abdur Rahman