Как использовать * ngIf else?

Я использую Angular, и я хочу использовать *ngIf else (доступно с версии 4) в этом примере:

<div *ngIf="isValid">
  content here ...
</div>

<div *ngIf="!isValid">
 other content here...
</div>

как я могу добиться такого же поведения с ngIf else ?

10 ответов


угловые 4 и 5:

используя else :

<div *ngIf="isValid;else other_content">
    content here ...
</div>

<ng-template #other_content>other content here...</ng-template>

вы также можете использовать then else :

<div *ngIf="isValid;then content else other_content">here is ignored</div>    
<ng-template #content>content here...</ng-template>
<ng-template #other_content>other content here...</ng-template>

или :

<div *ngIf="isValid;then content"></div>    
<ng-template #content>content here...</ng-template>

демо :

Plunker

детали:

<ng-template>: является ли Angular собственной реализацией <template> тег, который соответствует MDN :

HTML-код <template> element-это механизм удержания клиентской стороны содержимое, которое не отображается при загрузке страницы, но может впоследствии будет создан экземпляр во время выполнения с помощью JavaScript.


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

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

    <div *ngIf="isValid">
        If isValid is true
    </div>
    
  2. используя если с Else (обратите внимание на templateName)

    <div *ngIf="isValid; else templateName">
        If isValid is true
    </div>
    
    <ng-template #templateName>
        If isValid is false
    </ng-template>
    
  3. используя если с (обратите внимание на templateName)

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

демо: 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-

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

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


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

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

enter image description here

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

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

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

enter image description here

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

дополнительные детали

enter image description here