ngIf否则不起作用答案

【问题标题】：ngIf else not workingngIf否则不起作用
【发布时间】：2017-04-20 01:31:24
【问题描述】：

我不断收到错误

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

【问题讨论】：

我看不出该代码有什么问题。我会确保你正在运行 Angular 4.0。由于上述海报是正确的，因为角度 2 不支持这一点。

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

【解决方案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

如果您依赖动画，请从以下位置导入新的 BrowserAnimationsModule @angular/platform-browser/animations 在你的根 NgModule 中。没有这样，您的代码将编译并运行，但动画将触发错误。不推荐使用来自 @angular/core 的导入，请使用来自的导入新包导入 { trigger, state, style, transition, animate } 来自“@angular/animations”；。

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

【讨论】：

【解决方案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>

【讨论】：

虽然 Angular 版本 2 不支持 ng-if-else，但 Angular 版本 4 现在有了这个功能。