ng如果不工作

时间:2017-04-20 01:31:24

标签: angular angular2-directives angular-ng-if

我一直收到错误

  

无法绑定到' 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 个答案:

答案 0 :(得分:5)

Angular 2不支持Esle,你有两个选择:

1:使用正面案例:

Form1

2:将您的应用更新为Angular 4:

在Linux / Mac上:

Enabled

在Windows上:

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

如果您依赖动画,请从中导入新的BrowserAnimationsModule   你的根NgModule中的@ angular / platform-b​​rowser / animations。没有   这个,你的代码将编译并运行,但动画将触发一个   错误。来自@ angular / core的导入已弃用,请使用从中导入   新包导入{触发器,状态,样式,转换,动画}   来自'@ angular / animations';。

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

答案 1 :(得分: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>