web-dev-qa-db-ja.com

Typescriptを使用して要素を非表示にする

私は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 block（id：123）を非表示にしたいのですが、この方法で試しました。

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

nullのプロパティ 'style'を読み取れません。..この問題を解決するにはどうすればよいかというエラーが表示されます。

htmlangulartypescript
6
JanithCW

これは、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>

条件がfalseになった場合、*ngIfはノードとその子をDOMツリーから完全に削除し、条件がtrueになったときに最初から完全に再作成することに注意してください。

9
Armen Vardanyan

ここに示すように、ViewChildを#localvariableとともに使用してdom要素にアクセスできます。

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 {}
5
santosh singh