Angular 2
Как использовать ngif

Вступление

Синтаксис

• <div * ngIf = "false"> test </ div> <! - вычисляет false ->
• <div * ngIf = "undefined"> test </ div> <! - вычисляет значение false ->
• <div * ngIf = "null"> test </ div> <! - вычисляет false ->
• <div * ngIf = "0"> test </ div> <! - вычисляет false ->
• <div * ngIf = "NaN"> test </ div> <! - вычисляет false ->
• <div * ngIf = ""> test </ div> <! - вычисляет значение false ->
• Все остальные значения оцениваются как истинные.

Отображение загрузочного сообщения

Если наш компонент не готов и ждет данных с сервера, мы можем добавить загрузчик, используя * ngIf. шаги:

Сначала объявите логическое значение:

loading: boolean = false;

Затем в вашем компоненте добавьте крюк жизненного цикла, называемый ngOnInit

ngOnInit() {
   this.loading = true;
}

и после того, как вы получите полные данные с сервера, вы загружаете boolean в false.

 this.loading=false; 

В вашем шаблоне html используйте * ngIf с свойством loading :

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

Показать сообщение оповещения о состоянии

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

Запуск функции в начале или конце цикла * ngFor Использование * ngIf

NgFor предоставляет некоторые значения, которые могут быть сглажены локальным переменным

• index - (переменная) позиция текущего элемента в истребителе, начинающемся с 0
• first - (boolean) true, если текущий элемент является первым элементом в iterable
• last - (boolean) true, если текущий элемент является последним элементом в iterable
• even - (boolean) true, если текущий индекс является четным числом
• нечетное - (логическое) значение true, если текущий индекс является нечетным числом

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

Используйте * ngIf с * ngFor

Хотя вам не разрешено использовать *ngIf и *ngFor в одном и том же div (это даст ошибку во время выполнения), вы можете *ngIf в *ngFor чтобы получить желаемое поведение.

Пример 1: Общий синтаксис

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

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

  </div>
</div>

Пример 2. Отображение элементов с четным индексом

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

Недостатком является то, что необходимо добавить дополнительный внешний элемент div .

Но рассмотрите этот случай использования, когда необходимо, чтобы элемент div был итерирован (с использованием * ngFor), а также проверяет, нужно ли удалить элемент или нет (используя * ngIf), но добавление дополнительного div не является предпочтительным. В этом случае вы можете использовать тег template для * ngFor:

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

Таким образом, добавление дополнительного внешнего div не требуется, и, кроме того, элемент <template> не будет добавлен в DOM. Единственными элементами, добавленными в DOM из приведенного выше примера, являются итерированные элементы div .

Примечание. В Angular v4 <template> устарел в пользу <ng-template> и будет удален в версии 5. В версиях Angular v2.x сохраняется <template> .