В Угловой 4.х.х Вы можете использовать ngIf в четырех направлениях для достижения простой, если еще процедура:

1. Просто Использовать если

   <div *ngIf="isValid">
       If isValid is true
   </div>
   

2. используя если с другом (обратите внимание на имя_шаблона)

   <div *ngIf="isValid; else templateName">
       If isValid is true
   </div>
   
   <ng-template #templateName>
       If isValid is false
   </ng-template>
   

3. используя если с (обратите внимание на имя_шаблона)

   <div *ngIf="isValid; then templateName">
       Here is never showing
   </div>
   
   <ng-template #templateName>
       If isValid is true
   </ng-template>
   

4. используя если С то и остальное

   <div *ngIf="isValid; then thenTemplateName else elseTemplateName">
       Here is never showing
   </div>
   
   <ng-template #thenTemplateName>
       If isValid is true
   </ng-template>
   
   <ng-template #elseTemplateName>
       If isValid is false
   </ng-template>
   

Совет: ngIf оценивает выражение и выводит затем или другое шаблон на своем месте, когда выражение является истинным или ложным соответственно. Как правило то:

• затем шаблон-это встроенный шаблон ngIf если не привязан к другой стоимости.
• другое шаблон пуст, если он не привязан.

для работы с observable, это то, что я обычно делаю, чтобы отобразить, если наблюдаемый массив состоит из данных.

<div *ngIf="(observable$ | async) as listOfObject else emptyList">
   <div >
        ....
    </div>
</div>
 <ng-template #emptyList>
   <div >
        ...
    </div>
</ng-template>

"bindEmail" он будет проверять электронную почту доступна или нет. если электронная почта существует, чем выход из системы покажет В противном случае логин покажет

<li *ngIf="bindEmail;then logout else login"></li>
<ng-template #logout><li><a routerLink="/logout">Logout</a></li></ng-template>
<ng-template #login><li><a routerLink="/login">Login</a></li></ng-template>

В Угловых 4.0 if..else синтаксис очень похож на условные операторы в Java.

в Java вы используете "condition?stmnt1:stmnt2".

в Angular 4.0 вы используете *ngIf="condition;then stmnt1 else stmnt2".

результирующее значение выражения ngif будет не просто логическим true или false

если выражение является просто объектом, оно все равно оценивает его как истинность.

если объект не определен или не существует, то ngif будет оценивать его как ложность.

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

 <div *ngIf="!object">
     Still loading...........
 </div>

<div *ngIf="object">
     <!-- the content of this object -->

           object.info, object.id, object.name ... etc.
 </div>

еще пример:

  things = {
 car: 'Honda',
 shoes: 'Nike',
 shirt: 'Tom Ford',
 watch: 'Timex'
 };

 <div *ngIf="things.car; else noCar">
  Nice car!
 </div>

<ng-template #noCar>
   Call a Uber.
</ng-template>

 <!-- Nice car ! -->

anthoer пример:

<div *ngIf="things.car; let car">
   Nice {{ car }}!
 </div>
<!-- Nice Honda! -->

шаблон ngif

ngif угловой 4

<div *ngIf="this.model.SerialNumber != '';then ConnectedContent else DisconnectedContent" class="data-font">    </div>

<ng-template #ConnectedContent class="data-font">Connected</ng-template>
<ng-template #DisconnectedContent class="data-font">Disconnected</ng-template>

в угловом 4, 5 и 6

мы можем просто создать эталонная переменная шаблона^[2] и свяжите это с условием else внутри директивы * ngIf

возможные синтаксис^[1] являются:

<!-- Only If condition -->
<div *ngIf="condition">...</div>
<!-- or -->
<ng-template [ngIf]="condition"><div>...</div></ng-template>


<!-- If and else conditions -->
<div *ngIf="condition; else elseBlock">...</div>
<!-- or -->
<ng-template #elseBlock>...</ng-template>

<!-- If-then-else -->
<div *ngIf="condition; then thenBlock else elseBlock"></div>
<ng-template #thenBlock>...</ng-template>
<ng-template #elseBlock>...</ng-template>


<!-- If and else conditions (storing condition value locally) -->
<div *ngIf="condition as value; else elseBlock">{{value}}</div>
<ng-template #elseBlock>...</ng-template>

DEMO: https://stackblitz.com/edit/angular-feumnt?embed=1&file=src/app/app.component.html

источники:

1. https://angular.io/api/common/NgIf#syntax
2. https://angular.io/guide/template-syntax#template-reference-variables--var-

Я знаю, что это было некоторое время, но хочу добавить его, если это поможет. Способ, которым я пошел, - это иметь два флага в компоненте и два ngIf для соответствующих двух флагов.

Это было просто и хорошо работало с материалом, поскольку ng-шаблон и материал не работали хорошо вместе.

синтаксис для ngIf / Else

<div *ngIf=”condition; else elseBlock”>Truthy condition</div>
<ng-template #elseBlock>Falsy condition</ng-template>

используя NgIf / Else / затем явный синтаксис

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

<div *ngIf=”condition; then thenBlock else elseBlock”> ... </div> 
<ng-template #thenBlock>Then template</ng-template>
<ng-template #elseBlock>Else template</ng-template>

наблюдаемые с NgIf и асинхронной трубой

для более подробной информации