Angular 5 *ngIf 指令对构造函数中的布尔变量表现得很奇怪

Question

我在我的项目中使用 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);
    }

出于某种原因，只有 html 代码的第一块被渲染，而不考虑 _isFlag 值。 HTML 代码的第二个块永远不会出现，即使它满足 _isFlag 值。

这真的很奇怪。

Answer 1

isFlag的值很可能是"false"的字符串"true"而不是值true或value； if("false") 实际上为真，因为字符串在 javascript 中转换为真值。试试这个：

constructor(){
    this._isFlag= (_currUser.isFlag === 'true');
}

Answer 2

试试下面的方法。

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

ngOnInit(){

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

Angular 5 *ngIf 指令对构造函数中的布尔变量表现得很奇怪

Angular 5 *ngIf directive behaving weird with the boolean variable from constructor

angularjs-directive

angular

angular5