【问题标题】: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(...) 以使其可用于模块的组件。

    【讨论】:

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

      【讨论】:

        猜你喜欢
        • 2017-02-17
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 2015-11-28
        • 1970-01-01
        相关资源
        最近更新 更多