Angular2 инструкция else

Как angular2 предлагает рендеринг

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

в случае, если unfinishedTodos.length >0

и текст "пустой" в других случаях.

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>

выглядит уродливым

Ответы

Ответ 1

Angular 4.0

<ng-template #elseTemplate>
  else
</ng-template>
<ng-container *ngIf="expression; else elseTemplate">
  true
</ng-container>

или

<ng-container *ngIf="expression; then thenBlock; else elseBlock"></ng-container>
<ng-template #thenBlock>
  then
</ng-template>
<ng-template #elseBlock>
  else
</ng-template>

<template> устарел в пользу <ng-template>, чтобы избежать столкновения имен с уже существующим тегом.

Angular 2.0

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

Вы можете использовать, например. <div> вместо <ng-container>

Ответ 2

С новым синтаксисом Angular 4.0.0 для else выглядит так:

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

Ответ 3

Попробуйте это

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