首页 > 解决方案 > Angular 5 *ngIf 指令对构造函数中的布尔变量表现得很奇怪

问题描述

我在我的项目中使用Angular 5.2 版本,它在 DEV 区域中出现了非常奇怪的问题。

HTML 组件代码如下所示:-

    <div [hidden]="!_isFlag">
        <div class="pt-2 row">
            <div class="col-xs-12 col-md-3">
                <div class="form-group">
                   <input type="text" class="form-control" id="pName" placeholder="Last Name">
                 </div>
             </div>
          </div>                    
  </div>


   <div [hidden]="_isFlag">
        <div class="pt-2 row">
            <div class="col-xs-12 col-md-3">
                <div class="form-group">
                    <input type="text" class="form-control" id="pNum" placeholder="Given Number">
                </div>
            </div>    
        </div>
</div>

component.ts 文件如下所示。_currUser 是在 localStorage 对象的帮助下填充的,每个登录用户都不同。

    public _isFlag: boolean = false;    

    constructor(){
            this._isFlag= (<boolean>_currUser.isFlag);
    }

出于某种原因,无论 _isFlag 值如何,都只会渲染第一块 html 代码。第二个 HTML 代码块永远不会出现,即使它满足 _isFlag 值。

这真的很奇怪。

标签: angularangularjs-directiveangular5

解决方案


下面试试。

而不是在构造函数中分配标志,而是在 ngOnInit 中分配它。

ngOnInit(){

this._isFlag= (<boolean>_currUser.isFlag);
}

推荐阅读