2017-04-20 70 views
5

我不斷收到ngIf別的工作不

不能綁定到「ngIfElse」,因爲它不是「UL」的已知屬性的錯誤。

我確定某處我犯了一個愚蠢的錯誤,但找不到它。

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

回答

2

ng-if指令只處理陽性病例。爲否定的情況下(在else)使用一個單獨的塊:

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

雖然角度版本2不支持ng-if-else,但角度版本4現在具有此功能。 – Pengyy

+0

....不好意思,但是吧?爲什麼我的帖子被拒絕投票? –

+0

我已經反擊downvote。 –

5

角2不支持Esle,您有2種選擇:

1:使用肯定的情況下:

<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 :將您的應用更新到Angular 4:

在Linux/Mac上:

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

在Windows上:

npm install @angular/[email protected] @angular/[email protected] @angular/[email protected] @angular/[email protected] @angular/[email protected] @angular/[email protected] @angular/[email protected] @angular/[email protected] @angular/[email protected] @angular/[email protected] @angular/[email protected] [email protected] --save 

如果依靠動畫,從 導入新BrowserAnimationsModule @在你的根NgModule角/平臺的瀏覽器/動畫。沒有 這個,你的代碼將被編譯並運行,但是動畫會觸發一個 錯誤。來自@ angular/core的進口已被棄用,從'@ angular/animations';使用從 導入的新包import {trigger,state,style,transition,animate} 。

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

0

我看不出有什麼不對的代碼。

<ng-container *ngIf="!loading;else preloader"> 
    <p>Loaded stuff here!!!!!</p> 
</ng-container> 
<ng-template #preloader> 
    <div class="progress"> 
     <div class="indeterminate"></div> 
    </div> 
</ng-template> 

我會確保你運行的是Angular 4.0。由於上述海報是正確的,因此角度2不支持此功能。