如何在 Angular 2 中使用“ng-if”答案

【问题标题】：How to use 'ng-if' in Angular 2如何在 Angular 2 中使用“ng-if”
【发布时间】：2017-03-03 15:12:20
【问题描述】：

考虑：

<h3 style="color:#00bfff;margin:-14px 0 16px 0px" class="inline" *ng-if="data.for == 'next'">
    {{data.bannerText}}<sup><small>{{data.super}}</small></sup>
</h3>
<span class="NotinStockGrey"> {{data.textOne}} </span>
<span style="color:#00bfff"> {{data.textTWo}} </span>

错误：

zone.js:420 未处理的承诺拒绝：模板解析错误：
无法绑定到“ng-if”，因为它不是“h3”的已知属性。 ("0Fb;margin:-16px 0 16px 0px">

【问题讨论】：

标签： angular angular-ng-if

【解决方案1】：

我是 ngIf：

*ngIf="..."

（不是ng-if）

您还需要将BrowserModule (AppModule) 或CommonModule 添加到imports: [] 的@NgModule(...) 以使其可用于模块的组件。

【讨论】：

ngIf 与 *ngIf 的故事是什么？
* 表示短格式语法（长格式很少直接使用），ngIf 是结构指令 angular.io/guide/structural-directives angular.io/guide/structural-directives#shorthand-examples

【解决方案2】：

你必须使用 *ngIf 而不是 *ng-if。

<h3 style="color:#00bfff;margin:-14px 0 16px 0px" class="inline" *ngIf="data.for == 'next'">{{data.bannerText}}<sup><small>{{data.super}}</small></sup></h3><span class="NotinStockGrey" > {{data.textOne}} </span><span style="color:#00bfff">{{data.textTWo}}</span>

【讨论】：

【解决方案3】：

属性 ng-if 在 Angular 2 及更高版本中发生了变化，所以只需使用*ngIf="whatever"

类似于以下内容：

<div *ngIf="userObservable | async as user; else loading">
  Hello {{user.last}}, {{user.first}}!
</div>

或者是这样的：

<div *ngIf="mate">
  Hello {{ mate }}!
</div>

【讨论】：