Angular 2
Wie benutze ich ngif?

Einführung

Syntax

• <div * ngIf = "false"> test </ div> <! - wird zu false -> ausgewertet
• <div * ngIf = "undefined"> test </ div> <! - wird zu false -> ausgewertet
• <div * ngIf = "null"> test </ div> <! - wird zu false -> ausgewertet
• <div * ngIf = "0"> test </ div> <! - wird zu false -> ausgewertet
• <div * ngIf = "NaN"> test </ div> <! - wird zu false -> ausgewertet
• <div * ngIf = ""> test </ div> <! - wird zu false -> ausgewertet
• Alle anderen Werte werden als wahr ausgewertet.

Zeigt eine Lademeldung an

Wenn unsere Komponente nicht bereit ist und auf Daten vom Server wartet, können Sie den Loader mit * ngIf hinzufügen. Schritte:

Zuerst deklarieren Sie einen Boolean:

loading: boolean = false;

Als nächstes fügen Sie in Ihrer Komponente einen Lebenszyklus-Hook namens ngOnInit

ngOnInit() {
   this.loading = true;
}

und nachdem Sie vollständige Daten vom Server erhalten haben, laden Sie boolean auf false.

 this.loading=false; 

In Ihrem HTML - Template verwenden * ngIf mit der loading Eigenschaft:

<div *ngIf="loading" class="progress">
   <div class="progress-bar info" style="width: 125%;"></div>
</div>

Warnmeldung zu einer Bedingung anzeigen

<p class="alert alert-success" *ngIf="names.length > 2">Currently there are more than 2 names!</p>

Eine Funktion am Anfang oder Ende der * ngFor-Schleife ausführen Mit * ngIf

NgFor stellt einige Werte bereit, die für lokale Variablen einen Alias ​​haben können

• index - (variable) Position des aktuellen Elements im iterierbaren Element, beginnend bei 0
• first - (boolean) true, wenn das aktuelle Element das erste Element im iterierbaren Element ist
• last - (boolean) true, wenn das aktuelle Element das letzte Element im iterierbaren Element ist
• even - (boolean) true, wenn der aktuelle Index eine gerade Zahl ist
• odd - (boolean) true, wenn der aktuelle Index eine ungerade Zahl ist

<div *ngFor="let note of csvdata; let i=index; let lastcall=last">
      <h3>{{i}}</h3> <-- to show index position
      <h3>{{note}}</h3>
      <span *ngIf="lastcall">{{anyfunction()}} </span><-- this lastcall boolean value will be true only if this is last in loop
      // anyfunction() will run at the end of loop same way we can do at start
    </div>

Verwenden Sie * ngIf mit * ngFor

Während Sie *ngIf und *ngFor im selben div verwenden dürfen (es wird ein Fehler in der Laufzeit *ngIf ), können Sie die *ngIf in der *ngFor , um das gewünschte Verhalten zu erhalten.

Beispiel 1: Allgemeine Syntax

<div *ngFor="let item of items; let i = index">
  <div *ngIf="<your condition here>">

   <!-- Execute code here if statement true -->

  </div>
</div>

Beispiel 2: Anzeigeelemente mit geradem Index

<div *ngFor="let item of items; let i = index">
  <div *ngIf="i % 2 == 0">
    {{ item }}
  </div>
</div>

Der Nachteil ist, dass ein zusätzliches äußeres div Element hinzugefügt werden muss.

Beachten Sie diesen Anwendungsfall, bei dem ein div Element iteriert werden muss (mithilfe von * ngFor). Außerdem wird geprüft, ob das Element entfernt werden muss oder nicht (mit * ngIf). Das Hinzufügen eines zusätzlichen div wird jedoch nicht bevorzugt. In diesem Fall können Sie das template Tag für die * ngFor verwenden:

<template ngFor let-item [ngForOf]="items">
    <div *ngIf="item.price > 100">
    </div>
</template>

Auf diese Weise ist das Hinzufügen eines zusätzlichen äußeren div nicht erforderlich. Außerdem wird das Element <template> nicht zum DOM hinzugefügt. Die einzigen Elemente, die in dem DOM aus dem obigen Beispiel hinzugefügt werden, sind die iterierten div Elemente.

Hinweis: In Angular v4 ist <template> zugunsten von <ng-template> veraltet und wird in v5 entfernt. In Angular v2.x-Versionen ist <template> noch gültig.