Question

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

select d.*
from data d
order by d.timestamp desc
limit 1;

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

select d.*
from data d
where d.timestamp = (select max(d2.timestamp) from data d2);

错误说无法读取属性'style'的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使用＃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 {}

Answer 3

@Component({
  selector: 'my-app',
  template: `
   <div #id>
      <p>Hide This!</p>
   </div>
<div>
    <p>Hello World</p>
</div>
  `,
})
export class AppComponent {    
@ViewChild('id') id:ElementRef;
  constructor() {}
  ngOnInit()
  {
     this.id.nativeElement.hidden=true;
  }
}

Answer 4

使用DOM隐藏元素的最简单方法是

document.getElementById('123').hidden = true;

在打字稿中。

使用Typescript隐藏元素

4 个答案: