tuyên bố khác trong góc

Question

như thế nào angular2 đề xuất để render

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

trong trường hợp nếu unfinishedTodos.length >0

và văn bản "trống rỗng" trong những trường hợp khác.

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> 

trông xấu xí

Answer 1

Cú pháp tương thích với góc 4,0 và vượt quá

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

hoặc

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

Cú pháp tương thích với góc 2,0 và xa hơn nữa

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

quan trọng

• Bạn có thể sử dụng ví dụ: <div>, hoặc bất kỳ thẻ khác, thay vì <ng-container>

• <template> đã bị phản đối từ 4,0 ủng hộ <ng-template> để tránh va chạm tên with already existing tag.

Answer 2

Hãy thử điều này

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

Answer 3

Với mới kiễu góc 4.0.0 Cú pháp để tuyên bố khác trông như thế này:

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