这个答案是为那些不知道如何隐藏一个元素，从.ts文件可见

TS文件

实现OnInit { isHidden:boolean = false; 隐藏(){ 这一点。isHidden = true; ｝ 取消隐藏(){ 这一点。isHidden = false; ｝ ｝

HTML文件

< div[隐藏]=“isHidden >的< / div > <巴顿(click) =“hide ()“巴顿>隐藏< / > <巴顿(click) =“unHide ()“巴顿> UnHide < - >

隐藏属性可以用于此

[hidden]="!myVar"

另请参阅

https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/hidden

问题

hidden有一些问题，因为它可能与CSS的display属性冲突。

看看Plunker例子中的一些没有被隐藏，因为它有一个样式

:host {display: block;}

集。(这可能在其他浏览器中表现不同-我用Chrome 50测试)

解决方案

你可以通过添加来修正它

[hidden] { display: none !important;}

到index.html中的全局样式。

另一个陷阱

hidden="false"
hidden="{{false}}"
hidden="{{isHidden}}" // isHidden = false;

是一样的

hidden="true"

并且不会显示元素。

Hidden ="false"将分配字符串"false"，该字符串被认为是真值。 只有值为false或删除属性才会实际生成元素 可见。

使用{{}}也会将表达式转换为字符串，不会像预期的那样工作。

只有绑定[]才会像预期的那样工作，因为这个false被赋值为false而不是“false”。

*ngIf与[hidden]

*ngIf有效地从DOM中删除了它的内容，而[hidden]修改了display属性，只是指示浏览器不显示内容，但DOM仍然包含它。

在Angular文档https://angular.io/guide/structural-directives#why-remove-rather-than-hide上有两个例子

指令可以通过将其显示样式设置为none来隐藏不需要的段落。

<p [style.display]="'block'">
  Expression sets display to "block".
  This paragraph is visible.
</p>

<p [style.display]="'none'">
  Expression sets display to "none".
  This paragraph is hidden but still in the DOM.
</p>

你可以使用[style。display]="'block'"来替换ngShow和[style.]display]="'none'"替换ngHide。

我的问题是显示/隐藏一个垫子的按钮点击使用 < ng-container * ngIf = " myvar# " >。表的“加载”非常慢，在2-3秒内有300条记录。

数据是使用ngOnInit()中的订阅来加载的，并且可以在模板中使用，但是随着行数的增加，模板中表的“加载”变得越来越慢。

我的解决方案是将*ngIf替换为:

< div[风格。显示]= " activeSelected吗?'block': 'none'">

． 现在，当单击按钮时，表立即加载。

[隐藏]= " yourVariable " 或 [style.display] = " ! isShow ?'block': 'none'"

对我来说，[隐藏]=!瓦尔从来没有成功过。

因此，<div *ngIf="expression" style="display:none;" >

<div *ngIf="expression">总是给出正确的结果。