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?

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

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

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