web-dev-qa-db-fra.com

Autre déclaration en angulaire

Comment angular2 propose de rendre

<div *ngFor="let todo of unfinishedTodos">
    {{todo.title}}
</div>

en cas si unfinishedTodos.length >0

et texte "vide" dans d'autres cas.

P.S. 

<div *ngIf="unfinishedTodos && unfinishedTodos.length > 0">
    <div *ngFor="let todo of unfinishedTodos">
        {{todo.title}}
    </div>
</div>
<div *ngIf="!unfinishedTodos ||  unfinishedTodos.length <= 0">
    empty
</div>

a l'air moche

angularif-statementcondition
17
gstackoverflow

Syntaxe compatible avec Angular 4.0 et les versions ultérieures

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

ou

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

Syntaxe compatible avec Angular 2.0 et les versions ultérieures

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

Important

  • Vous pouvez utiliser par exemple <div>, ou toute autre balise, au lieu de <ng-container>

  • <template> était obsolète depuis la version 4.0 au profit de <ng-template> pour éviter les collisions de noms avec les balises déjà existantes.

25
Michal Pietraszko

Avec la nouvelle syntaxe Angular 4.0.0 pour l'instruction else, cela ressemble à ceci:

<div *ngIf="unfinishedTodos && unfinishedTodos.length > 0; else empty">
   <div *ngFor="let todo of unfinishedTodos">
      {{todo.title}}
   </div>
</div>
<ng-template #empty>
   empty
</ng-template >
4
Matej Maloča

Essaye ça

<div *ngFor="let todo of unfinishedTodos">
    {{todo.title}}
</div>
<div *ngIf="!unfinishedTodos?.length">
    empty
</div>
0
Sergey Sokolov