Else Angulaire

Comment angular2 proposer de rendre

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

dans le cas où si unfinishedTodos.length >0

et le texte "vide" dans un autre 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>

semble laid

InformationsquelleAutor gstackoverflow | 2016-12-21
  1. 27

    Compatible avec la syntaxe Angulaire 4.0 et au-delà

    <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 au-delà

    <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> avait été déconseillé depuis 4.0 en faveur de <ng-template> pour éviter les collisions de noms avec déjà balise existante.

    InformationsquelleAutor Michal Pietraszko
  2. 5

    Avec de nouveaux Angulaire 4.0.0 syntaxe de l'instruction else 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 >
    • Était trop lent. Quelques exemples de plus github.com/angular/angular/blob/...
    • J'espère que la syntaxe, il va être encore plus beau par le temps nécessaire à la mainlevée venir.
    • Dans Angulaire 4.0 <template> est déconseillée en faveur de <ng-template>.
    InformationsquelleAutor Matej Maloča
  3. 0

    Essayer cette

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