ngSe mais não estiver funcionando - angular, angular2-diretivas, angular-ng-se

Eu continuo recebendo o erro

Não é possível vincular a "ngIfElse", pois não é uma propriedade conhecida de "ul".

Tenho certeza de que em algum lugar estou cometendo um erro estúpido, mas não consigo encontrá-lo.

<ul *ngIf="!finished; else elseBlock" id="time">
<li id="hour" class="chart"  data-percent="100"><span>{{hour}} </span></li>
<li id="min" class="chart" data-percent="100"><span>{{minute}}</span></li>
<li id="second" class="chart" data-percent="100"><span>{{second}}</span></li>
</ul>
<ng-template  #elseBlock>  <h4 id="time">DONE</h4> </ng-template>

Respostas:

Angular 2 não suporta Esle, você tem 2 opções:

1: usando caso positivo:

<ul *ngIf="!finished" id="time">
<li id="hour" class="chart"  data-percent="100"><span>{{hour}} </span></li>
<li id="min" class="chart" data-percent="100"><span>{{minute}}</span></li>
<li id="second" class="chart" data-percent="100"><span>{{second}}</span</li>
</ul>
<h4 id="time" *ngIf="finished"> <!-- this -->
DONE
</h4>

2: atualize seu aplicativo para o Angular 4:

No Linux / Mac:

npm install @angular/{common,compiler,compiler-cli,core,forms,http,platform-browser,platform-browser-dynamic,platform-server,router,animations}@latest typescript@latest --save

No Windows:

npm install @angular/common@latest @angular/compiler@latest @angular/compiler-cli@latest @angular/core@latest @angular/forms@latest @angular/http@latest @angular/platform-browser@latest @angular/platform-browser-dynamic@latest @angular/platform-server@latest @angular/router@latest @angular/animations@latest typescript@latest --save

Se você confiar em animações, importe o novoBrowserAnimationsModule de @ angular / navegador da plataforma / animações no NgModule raiz. Sem isso, seu código será compilado e executado, mas as animações acionarão um erro. As importações de @ angular / core foram descontinuadas, use importações de a nova importação de pacote {gatilho, estado, estilo, transição, animação} de "@ angular / animações" ;.

http://angularjs.blogspot.com/2017/03/angular-400-now-available.html

o ng-if A diretiva lida apenas com o caso positivo. Para o caso negativo (o else) use um bloco separado:

<ul ng-if="!finished" id="time">
<li id="hour"   class="chart" data-percent="100"><span>{{hour}} </span></li>
<li id="min"    class="chart" data-percent="100"><span>{{minute}}</span></li>
<li id="second" class="chart" data-percent="100"><span>{{second}}</span></li>
</ul>
<ng-if="finished">
<h4 id="time">DONE</h4>
</ng-template>