Angular 2
Hur man använder ngif

Introduktion

Syntax

• <div * ngIf = "falskt"> test </div> <! - utvärderar till falskt ->
• <div * ngIf = "undefined"> test </div> <! - utvärderas till falskt ->
• <div * ngIf = "null"> test </div> <! - utvärderar till falskt ->
• <div * ngIf = "0"> test </div> <! - utvärderas till falskt ->
• <div * ngIf = "NaN"> test </div> <! - utvärderar till falskt ->
• <div * ngIf = ""> test </div> <! - utvärderar till falskt ->
• Alla andra värden utvärderas till sant.

Visa ett laddningsmeddelande

Om vår komponent inte är redo och väntar på data från servern, kan vi lägga till loader med * ngIf. Steg:

Förklara först en booleska:

loading: boolean = false;

Därefter lägg till en livscykelkrok som heter ngOnInit i din komponent

ngOnInit() {
   this.loading = true;
}

och när du har fått fullständig data från servern laddar du boolean till falsk.

 this.loading=false; 

Använd * ngIf med loading din html-mall:

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

Visa varningsmeddelande på ett villkor

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

För att köra en funktion i början eller slutet av * ngFor loop Använd * ngIf

NgFor tillhandahåller Vissa värden som kan justeras till lokala variabler

• index - (variabel) position för den aktuella artikeln i den iterable som börjar på 0
• först - (booleskt) sant om det aktuella objektet är det första objektet i iterable
• sist - (booleskt) sant om det aktuella objektet är det sista objektet i iterable
• jämnt - (booleskt) sant om det aktuella indexet är ett jämnt tal
• udda - (booleskt) sant om det aktuella indexet är ett udda tal

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

Använd * ngIf med * ngFor

Även om du inte får använda *ngIf och *ngFor i samma div (det ger ett fel i körtiden) kan du bo nest *ngIf i *ngFor att få önskat beteende.

Exempel 1: Allmän syntax

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

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

  </div>
</div>

Exempel 2: Visa element med jämnt index

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

Nackdelen är att ett ytterligare yttre div element måste läggas till.

Men överväg detta användningsfall där ett div element måste itereras (med * ngFor) och även inkluderar en kontroll om elementet behöver tas bort eller inte (med * ngIf), men att lägga till en ytterligare div är inte att föredra. I det här fallet kan du använda template taggen för * ngFor:

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

Det här sättet att lägga till en extra yttre div behövs inte och <template> -elementet kommer inte att läggas till i DOM. De enda elementen som läggs till i DOM från ovanstående exempel är de itererade div .

Obs: I Angular v4 har <template> avskrivits till förmån för <ng-template> och kommer att tas bort i v5. I Angular v2.x släpps <template> fortfarande giltigt.