当元素在 *ngIf 容器内时，DOM 未定义

Question

我的问题是当元素是 *ngIf 容器的子元素时，我无法访问特定的 DOM 元素及其属性。

我的情况是：我在 div 中有一个 mat-table，该 div 有 *ngIf 指令，然后当我的数据源更改时我尝试调用 mytable.renderRows()，但我得到了一个未定义的值。我看到当元素在 ngIf 指令内时会发生此问题，在其他情况下我可以毫无问题地访问。

<div *ngIf="!hasPermission" >
    <table mat-table #myTable [dataSource]="myDataSource">

我在 .ts 文件中有这个：

export class MyComponent {

   hasPermission = true

   @ViewChild('myTable',{static:true}) myTable: MatTable<any>;

   constructor(){
      if(checkSomething == true){
          this.hasPermission = false
          this.myFunctionIfNotHavePermsissions()
      }
   }

   myFunctionIfNotHavePermsissions(){
      this.myTable.renderRows();
      // console.log(this.myTable); *NOTE: This output: undefined*
   }

}

目前，我解决了这个问题，使用 css 隐藏了 div，但我认为这不是最好的解决方案，提前感谢您的 cmets。

<div *ngIf="!hasPermission" >

to

<div [ngClass]="{ 'nodisplay': !hasPermission}" >

.nodisplay{display:none!important;}

Answer 1

我可能不知道它背后的真正原因，但我认为 Angular 需要一点时间来首先渲染 ngIf 元素内的任何内容，然后再提供给 DOM。

您可以通过在此处将 static 更改为 false 来解决您的问题

@ViewChild('myTable', {static: false}) myTable: MatTable<any>;

并在 setTimeout

中调用 this.myFunctionIfNotHavePermissions()

constructor(){
  if(checkSomething == true){
      this.hasPermission = false
      setTimeout(()=> this.myFunctionIfNotHavePermsissions());
  }
}

Answer 2

在构造函数中，您的模板尚未准备好并且未呈现 mat-table。

在ngOnInit中添加你的逻辑

export class MyComponent implements OnInit {

   hasPermission = true

   @ViewChild('myTable',{static:true}) myTable: MatTable<any>;


   constructor() {}


   ngOnInit() {
      if(checkSomething == true){
          this.hasPermission = false
          this.myFunctionIfNotHavePermsissions()
      }
   }

   myFunctionIfNotHavePermsissions(){
      this.myTable.renderRows();
      // console.log(this.myTable); *NOTE: This output: undefined*
   }

}