使用 Typescript 隐藏元素

Question

我是 Typescript 和 Angular Material 的新手。我想将元素隐藏在这样的元素中。

 <div id="abc">
   <div id="123">
      <p>Hello!</p>
   </div>
      <p>World</p>
</div>
<div id="def">
    <p>Hello World</p>
</div>

我想隐藏div块（id：123）。我试过这种方式。

 var formElement = <HTMLFormElement>document.getElementById('123');
formElement.style.display='block';

它收到一条错误消息，提示 无法读取 null 的属性“样式”…。 我该如何解决这个问题。

原文由 JanithCW 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

这不是在 Angular 中隐藏元素的方式。将元素的样式属性绑定到布尔值，如下所示：

 <form [style.display]="isVisible ? 'block' : 'none'">... contents</form>

在您的组件类中：

 this.isVisible = false; // whenever you need to hide an element

或者您可以使用 *ngIf ：

 <form *ngIf="isVisible">... contents</form>

请注意 *ngIf 如果条件变为 false 从 DOM 树中完全删除节点及其子节点，并在条件变为 true 时从头开始完全重新创建它们 --- 。

原文由 Armen Vardanyan 发布，翻译遵循 CC BY-SA 3.0 许可协议