使用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 ....我怎么能解决这个问题.

Answer 1

这不是隐藏Angular中元素的方法.将元素的style属性绑定到布尔值,如下所示:

<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.

Answer 2

您可以使用ViewChild＃来访问dom元素 ，localvariable如下所示，

import {Component, NgModule,ViewChild,ElementRef} from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'

@Component({
  selector: 'my-app',
  template: `
   <div id="abc">
   <div #id id="123">
      <p>Hide!</p>
   </div>
      <p>World</p>
</div>
<div id="def">
    <p>Hello World</p>
</div>
  `,
})
export class App {
  name:string;

@ViewChild('id') el:ElementRef;
  constructor() {
    this.name = `Angular! v${VERSION.full}`
  }
  ngAfterViewInit()
  {
     this.el.nativeElement.style.display='none';
     console.log(this.el.nativeElement);
  }
}

@NgModule({
  imports: [ BrowserModule ],
  declarations: [ App ],
  bootstrap: [ App ]
})
export class AppModule {}