Як використовувати * ngIf else?


631

Я використовую Angular і хочу використовувати *ngIf else(доступний з версії 4) у цьому прикладі:

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

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

Як я можу отримати таку саму поведінку ngIf else?


1
Ознайомтесь з кутом 8, поясненим із прикладами NgIf, NgIf Else та NgIf Потім Else freakyjolly.com/…
код шпигуна

Відповіді:


980

Кутові 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>

або thenпоодинці:

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

Демонстрація:

Плункер

Деталі:

<ng-template>: є власною реалізацією <template>тегу Angular, який відповідає MDN :

Елемент HTML <template>- це механізм зберігання контенту на стороні клієнта, який не повинен бути відображений під час завантаження сторінки, але згодом може бути ініційований під час виконання за допомогою JavaScript.


8
Я сподівався, що існує спосіб просто використовувати <ng-template> без іншого тегу, як div, але, як не дивно, це не так ... Я знаю, що <div> видаляється, коли ви його використовуєте, але це як би дивно, як реалізація, я думаю.
andreas

20
@andreas Ви можете використовувати <ng-container>для if-пункт
Мартін Шнайдер

2
Примітка: ви можете використовувати ng-containerконтейнер, що містить * ngIf, але не для шаблону
Simon_Weaver

@Simon_Weaver я зрозумів це важким шляхом. Але чому? чому вони не дали *ngIf працювати ng-template?
Еран Медан

<div * ngIf = "isValid; тоді вміст else_content"> тут ігнорується </div> він не ігнорується. це місце для введення ng-шаблону
dimson d

185

У куті 4.xx Ви можете використовувати ngIf чотирма способами, щоб досягти простої, якщо іншої процедури:

  1. Просто використовуйте If

    <div *ngIf="isValid">
        If isValid is true
    </div>
    
  2. Використання If з Else (Будь ласка, зверніть увагу на templateName )

    <div *ngIf="isValid; else templateName">
        If isValid is true
    </div>
    
    <ng-template #templateName>
        If isValid is false
    </ng-template>
    
  3. Використання If with then (Будь ласка, зверніть увагу на templateName )

    <div *ngIf="isValid; then templateName">
        Here is never showing
    </div>
    
    <ng-template #templateName>
        If isValid is true
    </ng-template>
    
  4. Використання If з Потім і Else

    <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, якщо не пов'язаний з іншим значенням.
  • Ще шаблон порожній, якщо він не пов'язаний.

Схоже, компілятор не приймає ...; else .... Ймовірно, це ;слід зняти.
slartidan

5
в кутовій-6, я тестував, ...; else ...і це спрацювало
WasiF

20

Для роботи з спостережуваним я зазвичай це роблю для відображення, якщо масив, що спостерігається, складається з даних.

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

8

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

2
Це не працює. Якби це було правильно, то воно все одно не додало б ніякого значення, оскільки прийнята відповідь показує, як це зробити.
Günter Zöchbauer

8

Ви можете використовувати <ng-container>і <ng-template>для досягнення цього

<ng-container *ngIf="isValid; then template1 else template2"></ng-container>

<ng-template #template1>
     <div>Template 1 contains</div>
</ng-template>

<ng-template #template2>
     <div>Template 2 contains </div>
</ng-template>

Демонстрацію програми Stackblitz Live ви можете знайти нижче

жива демонстрація

Сподіваюся, що це допоможе ... !!!


8

Для кутових 9/8

Посилання на джерело з прикладами

    export class AppComponent {
      isDone = true;
    }

1) * ngIf

    <div *ngIf="isDone">
      It's Done!
    </div>

    <!-- Negation operator-->
    <div *ngIf="!isDone">
      It's Not Done!
    </div>

2) * ngIf та Else

    <ng-container *ngIf="isDone; else elseNotDone">
      It's Done!
    </ng-container>

    <ng-template #elseNotDone>
      It's Not Done!
    </ng-template>

3) * ngIf, Тоді і інше

    <ng-container *ngIf="isDone;  then iAmDone; else iAmNotDone">
    </ng-container>

    <ng-template #iAmDone>
      It's Done!
    </ng-template>

    <ng-template #iAmNotDone>
      It's Not Done!
    </ng-template>

Це лише повторює те, що вже було сказано у прийнятій відповіді
phil294

6

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

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

введіть тут опис зображення

Використання явного синтаксису NgIf / Else / then

Щоб додати тоді шаблон, ми просто мусимо його чітко прив’язати до шаблону.

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

введіть тут опис зображення

Спостерігається за допомогою NgIf та Async Pipe

Детальніше

введіть тут опис зображення


6

Просто додайте нові оновлення від Angular 8.

  1. У випадку, якщо з іншим, ми можемо використовувати ngIf і ngIfElse .
<ng-template [ngIf]="condition" [ngIfElse]="elseBlock">
  Content to render when condition is true.
</ng-template>
<ng-template #elseBlock>
  Content to render when condition is false.
</ng-template>
  1. У випадку, якщо з тим часом, ми можемо використовувати ngIf і ngIfThen .
<ng-template [ngIf]="condition" [ngIfThen]="thenBlock">
  This content is never showing
</ng-template>
<ng-template #thenBlock>
  Content to render when condition is true.
</ng-template>
  1. У випадку, якщо з тодішнім і іншим, ми можемо використовувати ngIf , ngIfThen і ngIfElse .
<ng-template [ngIf]="condition" [ngIfThen]="thenBlock" [ngIfElse]="elseBlock">
  This content is never showing
</ng-template>
<ng-template #thenBlock>
  Content to render when condition is true.
</ng-template>
<ng-template #elseBlock>
  Content to render when condition is false.
</ng-template>

Чудово! Нещодавно ми перейшли до кутової 8
Іслам Муртазаєв

5

У Angular 4.0 if..elseсинтаксис досить схожий на умовні оператори на Java.

На Java ви використовуєте "condition?stmnt1:stmnt2".

У Angular 4.0 ви використовуєте *ngIf="condition;then stmnt1 else stmnt2".


1
виглядає як випадок Oracle, коли вираз .. :-)
Пітер


5

Отримане значення виразу ngif не буде просто булевим істинним чи хибним

якщо вираз є лише предметом, воно все одно оцінює його як правдивість.

якщо об'єкт не визначений або не існує, то 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 ! -->

приклад антора:

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

ngif шаблон

ngif кутовий 4


5

ng-template

<ng-template [ngIf]="condition1" [ngIfElse]="template2">
        ...
</ng-template>


<ng-template #template2> 
        ...
</ng-template>

3

Існує дві можливості використовувати, якщо умова для тегу або шаблонів HTML:

  1. * ngIf директива від CommonModule, на тег HTML;
  2. якщо ще

введіть тут опис зображення


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

1

У кутових 4, 5 і 6

Ми можемо просто створити довідкову змінну шаблону [2] та зв’язати її з іншим умовою всередині директиви * 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-

1

Ви також можете використовувати короткий потрійний умовний оператор Javascript? в такому куті:

{{doThis() ? 'foo' : 'bar'}}

або

<div [ngClass]="doThis() ? 'foo' : 'bar'">

0

Я знаю, що це минуло деякий час, але хочу додати його, якщо це допоможе. Шлях, по якому я пішов, - це мати два прапори в компоненті та два ngIfs для відповідних двох прапорів.

Це було просто і добре працювало з матеріалом, оскільки ng-шаблон і матеріал не працювали добре разом.

Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.