Else-Anweisung in Angular

Question

Wie funktioniert angular2 vorschlägt

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

im Fall, wenn unfinishedTodos.length >0

und Text "leer" in anderen Fällen zu machen.

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> 

sieht hässlich

Answer 1

Syntax kompatibel mit kantigem 4.0 und darüber hinaus

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

oder

<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 kompatibel mit kantigem 2.0 und darüber hinaus

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

Wichtige

• Sie können z. <div> oder jede andere Tag, statt <ng-container>

• <template> hatte seit 4.0 für <ng-template> veraltet Namenskollision with already existing tag.

Answer 2

dieses Versuchen

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

Answer 3

Mit neuen Angular 4.0.0 Syntax für else-Anweisung sieht wie folgt aus:

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