Angular 2
Jak korzystać z ngif

Wprowadzenie

Składnia

• <div * ngIf = "false"> test </div> <! - zwraca wartość false ->
• <div * ngIf = "undefined"> test </div> <! - zwraca wartość false ->
• <div * ngIf = "null"> test </div> <! - zwraca wartość false ->
• <div * ngIf = "0"> test </div> <! - zwraca wartość false ->
• <div * ngIf = "NaN"> test </div> <! - zwraca wartość false ->
• <div * ngIf = ""> test </div> <! - zwraca wartość false ->
• Wszystkie pozostałe wartości są prawdziwe.

Wyświetl komunikat ładowania

Jeśli nasz komponent nie jest gotowy i czeka na dane z serwera, możemy dodać moduł ładujący za pomocą * ngIf. Kroki:

Najpierw zadeklaruj wartość logiczną:

loading: boolean = false;

Następnie w swoim komponencie dodaj hak cyklu życia o nazwie ngOnInit

ngOnInit() {
   this.loading = true;
}

a po uzyskaniu kompletnych danych z serwera ładujesz wartość logiczną na false.

 this.loading=false; 

W kodzie HTML szablonu użytku * ngIf z loading nieruchomości:

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

Pokaż komunikat ostrzegawczy pod warunkiem

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

Aby uruchomić funkcję na początku lub na końcu pętli * ngFor za pomocą * ngIf

NgFor zapewnia pewne wartości, które można aliasować do zmiennych lokalnych

• indeks - (zmienna) pozycja bieżącego elementu w iteracji od 0
• first - (boolean) true, jeśli bieżący element jest pierwszym elementem iterowalnym
• last - (boolean) true, jeśli bieżący element jest ostatnim elementem iterowalnym
• even - (boolean) true, jeśli bieżący indeks jest liczbą parzystą
• nieparzysty - (boolean) true, jeśli bieżący indeks jest liczbą nieparzystą

<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>

Użyj * ngIf z * ngFor

Chociaż nie możesz używać *ngIf i *ngFor w tym samym div (da to błąd w czasie wykonywania), możesz zagnieździć *ngIf w *ngFor aby uzyskać pożądane zachowanie.

Przykład 1: Ogólna składnia

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

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

  </div>
</div>

Przykład 2: Wyświetl elementy o parzystym indeksie

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

Minusem jest to, że należy dodać dodatkowy zewnętrzny element div .

Ale rozważ ten przypadek użycia, w którym element div musi być iterowany (przy użyciu * ngFor), a także obejmuje sprawdzenie, czy element należy usunąć, czy nie (przy użyciu * ngIf), ale dodanie dodatkowego elementu div nie jest zalecane. W takim przypadku możesz użyć znacznika template dla * ngFor:

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

W ten sposób dodanie dodatkowego div nie jest potrzebne, a ponadto element <template> nie zostanie dodany do DOM. Jedynymi elementami dodanymi do DOM z powyższego przykładu są iterowane elementy div .

Uwaga: W Angular v4 <template> został wycofany na korzyść <ng-template> i zostanie usunięty w v5. W wydaniach Angular v2.x <template> jest nadal aktualny.