在运行时忽略ngIF假值

My * ngIf指令可以将元素带入DOM，但不会超出它。使用下面的代码，我可以从父组件成功调用showGlobalDialog（），但hideGlobalDialog（）似乎不起作用。在运行时忽略ngIF假值

子组件模板：

<div class="modal" *ngIf="isVisible === true"> 
    <ng-content></ng-content> 
</div>

子组件：

public show(): void { 
    this.isVisible = true; 
} 

public hide(): void { 
    this.isVisible = false; 
}

父组件模板：

<app-mycomponent #globalDialog> 
    <div> 
     <button (click)="hideGlobalDialog()">Done</button> 
    </div> 
</app-mycomponent>

父组件：

@ViewChild('globalDialog') globalDialog: MyComponent; 

    private showGlobalDialog() { 
     this.globalDialog.show(); 
    } 

    public hideGlobalDialog() { 
     this.globalDialog.hide(); 
    }

奇怪的是，在这两个边缘和Chrome的DOM浏览器中显示该ngIf正确设置为false：在showGlobalDialog（）

：上hideGlobalDialog（）

<!--bindings={ 
    "ng-reflect-ng-if": "true" 
}-->

：

<!--bindings={ 
    "ng-reflect-ng-if": "false" 
}-->

但是，即使使用上述绑定注释，元素仍然可见。当'isVisible'为false时，我不希望元素存在于DOM中，因此移动到[hidden]不是选项。

来源

2017-08-29 Darc

重新启动Web服务器最终解决了问题，并且一切正常。

来源

2017-08-29 04:16:30 Darc

在运行时忽略ngIF假值

回答

相关问题