Else statement in Angular

前端 未结 4 693
有刺的猬
有刺的猬 2021-01-03 23:00

How does angular2 propose to render

{{todo.title}}

in case if unf

相关标签:
4条回答
  • 2021-01-03 23:28

    Syntax compatible with Angular 4.0 and beyond

    <ng-template #elseTemplate>
      Content displayed if expression returns false
    </ng-template>
    <ng-container *ngIf="expression; else elseTemplate">
      Content displayed if expression returns true
    </ng-container>
    

    or

    <ng-container *ngIf="expression; then thenBlock; else elseBlock"></ng-container>
    <ng-template #thenBlock>
      Content displayed if expression returns true
    </ng-template>
    <ng-template #elseBlock>
      Content displayed if expression returns false
    </ng-template>
    

    Syntax compatible with Angular 2.0 and beyond

    <ng-container *ngIf="expression">
        true
    </ng-container>
    <ng-container *ngIf="!expression">
        else
    </ng-container>
    

    Important

    • You can use e.g. <div>, or any other tag, instead of <ng-container>

    • <template> had been deprecated since 4.0 in favor of <ng-template> to avoid name collision with already existing tag.

    0 讨论(0)
  • 2021-01-03 23:31

    With new Angular 4.0.0 syntax for else statement looks like this:

    <div *ngIf="unfinishedTodos && unfinishedTodos.length > 0; else empty">
       <div *ngFor="let todo of unfinishedTodos">
          {{todo.title}}
       </div>
    </div>
    <ng-template #empty>
       empty
    </ng-template >
    
    0 讨论(0)
  • 2021-01-03 23:38

    Try this

    <div *ngFor="let todo of unfinishedTodos">
        {{todo.title}}
    </div>
    <div *ngIf="!unfinishedTodos?.length">
        empty
    </div>
    
    0 讨论(0)
  • 2021-01-03 23:48

    CSS solution

    <style>
        .empty { display: none; }
        .empty:only-child { display: block; }
    </style>
    
    <div>
        <div *ngFor="let todo of unfinishedTodos">
            {{todo.title}}
        </div>
        <div class="empty">
            empty
        </div>
    </div>
    
    0 讨论(0)
提交回复
热议问题