Else w Kątowymi

Question

Jak angular2 zaproponować renderowanie

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

w przypadku, gdy unfinishedTodos.length >0

i tekst "pusty" w kolejnych przypadkach.

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> 

wygląda brzydko

Answer 1

Składnia zgodna z kątowa 4,0 i poza nią:

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

lub

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

Składnia zgodna z Kątowymi 2,0 i poza

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

Ważne

• Możesz użyć np. <div> lub inny znacznik, zamiast <ng-container>

• <template> były przestarzałe od 4,0 na korzyść <ng-template> aby uniknąć kolizji nazw with already existing tag.

Answer 2

Spróbuj

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

Answer 3

Dzięki nowej Kątowymi 4.0.0 składni else wygląda następująco:

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