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

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

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

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

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

Ответ 1

Угловые 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>

Демо:

Plunker

Подробности:

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

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

Ответ 2

В Angular 4.xx Вы можете использовать ngIf четырьмя способами для достижения простой процедуры if else:

Просто используйте, если

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

Использование If с остальным (обратите внимание на templateName)

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

<ng-template #templateName>
    If isValid is false
</ng-template>

Использование If with Then (обратите внимание на templateName)

<div *ngIf="isValid; then templateName">
    Here is never showing
</div>

<ng-template #templateName>
    If isValid is true
</ng-template>

Использование If с Then и 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 оценивает выражение и затем отображает шаблон then или else на его месте, когда выражение верно или ложно, соответственно. Как правило,

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

иначе шаблон пуст, если он не связан.

Ответ 3

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

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

Ответ 4

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

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

Ответ 5

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

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

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

Ответ 6

результирующее значение выражения 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 ! -->

Другой пример:

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

шаблон NGIF

NGIF угловой 4

Ответ 7

Синтаксис для 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 и Async Pipe

Больше подробностей

Ответ 8

ng-template

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


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

Ответ 9

Существует две возможности использовать условие if для тега HTML или шаблонов:

* директива ngIf от CommonModule для тега HTML;
если еще

Ответ 10

Для angular 8

Источник Ссылка спримерами

    export class AppComponent {
      isDone = true;
    }

1) * ngIf

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

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

2) * ngIf и остальное

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

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

3) * ngIf, тогда и остальное

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

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

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

Ответ 11

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

Ответ 12

Вы также можете использовать Javascript кратковременный условный оператор? в угловом, как это:

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

или же

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

Ответ 13

В угловых 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

Источники:

Ответ 14

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

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

Ответ 15

вы можете добиться того же поведения с помощью ngIf, попробуйте:

Ответ 16

Вот одно из лучших объяснений и примеров условного рендеринга для Angular. https://ultimatecourses.com/blog/angular-ngif-else-then

Ответ 17

Посмотрите видео о том, как использовать If, "if else then-block" и "if then-block else else-block" https://www.youtube.com/watch?v=sSaor3-zatI&feature=youtu.be

Ответ 18

Angular 8

<div *ngIf="condition; else elseBlock"> when condition is true.</div>
<ng-template #elseBlock> when condition is false.</ng-template>