ng如果不工作

Question

我一直在收到错误

无法绑定到'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>

Answer 1

Angular 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 typescript@latest --save 

在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

如果您依赖Animations,请从根NgModule中的@ angular/platform-b​​rowser/animations导入新的BrowserAnimationsModule.如果没有这个,您的代码将编译并运行,但动画将触发错误.来自@ angular/core的导入已被弃用,使用来自'@ angular/animations'的新包导入{trigger,state,style,transition,animate}的导入.

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

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