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

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

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

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

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

+531
источник поделиться
18 ответов

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

+862
источник

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

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

    <div *ngIf="isValid">
        If isValid is true
    </div>
    
  2. Использование If с остальным (обратите внимание на 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 с 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, если он не связан с другим значением.
  • иначе шаблон пуст, если он не связан.
+152
источник
другие ответы

Связанные вопросы


Похожие вопросы

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

<div *ngIf="(observable$ | async) as listOfObject else emptyList">
   <div >
        ....
    </div>
</div>
 <ng-template #emptyList>
   <div >
        ...
    </div>
</ng-template>
+15
источник

"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>
+6
источник

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

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

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

+4
источник

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

+4
источник

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

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

enter image description here

+4
источник

ng-template

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


<ng-template #template2> 
        ...
</ng-template>
+3
источник

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

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

enter image description here

+2
источник

Для 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>
+2
источник
<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
источник

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

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

или же

<div [ngClass]="doThis() ? 'foo' : 'bar'">
+1
источник

В угловых 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-
0
источник

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

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

0
источник

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

try this

0
источник

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

0
источник

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

0
источник

Angular 8

<div *ngIf="condition; else elseBlock"> when condition is true.</div>
<ng-template #elseBlock> when condition is false.</ng-template>
0
источник

Посмотрите другие вопросы по меткам или Задайте вопрос