@ViewChild 未在 ngAfterViewInit

如何解决@ViewChild 未在 ngAfterViewInit

我在使用 *ngIf 和 @ViewChild 时遇到问题。对于此类其他问题，我尝试了大多数推荐的解决方案，但没有任何效果。

我的 HTML 文件如下：

<div id="main-container" class="page-layout blank p-24" fusePerfectScrollbar fxLayout="column">
  <mat-tab-group #tabGroup (selectedTabChange)="onTabChange($event);" fxLayout="row wrap">

     <mat-tab label="Some1" *ngIf="arrayNames.includes('Some1')">
            <ng-template matTabContent>
                <my-table #table></my-table>
            </ng-template>
        </mat-tab>

        <mat-tab label="Some2" *ngIf="arrayNames.includes('Some2')">
            <ng-template matTabContent>
                <my-table #table></my-table>
            </ng-template>
        </mat-tab>

        <mat-tab label="Some3" *ngIf="arrayNames.includes('Some3')">
            <ng-template matTabContent>
                <my-table #table></my-table>
            </ng-template>
        </mat-tab>
   </mat-tab-group>
</div>

在我的组件 ts 文件中，我有以下内容：

  matTabs = [1,2,3]; 
  @ViewChild('tabGroup',{static: false}) tabGroup: MatTabGroup;
  data: Array<SomeEntity> = [];
  arrayNames: Array<string> = [];
  @ViewChild('table',{ static: false }) table: AnotherComponent;
  
  ngOnInit() {
    this.someService.getAll()
    .subscribe((result) => {
      this.data = result;
      for (let d of this.data) {
        this.arrayNames.push(d.name);
      }
    });
  }

  ngAfterViewInit(): void {
    this.selectedTabLabel = this.tabGroup?._tabs?.first.textLabel;
    this.TabChangeService.changeTab(this.selectedTabLabel);
    this.table.displayMyTable();
  }

'table' 子元素总是未定义。有什么办法可以修改它，以便在视图初始化后在第一个 mat-tab 上显示数据？

页面加载完成后显示如下：

因为 this.table.displayMyTable(); 不显示任何内容，因为“this.table 未定义”

解决方法

您可以考虑尝试的两件事：

首先：用 setTimeout 包围 this.table

  ngAfterViewInit(): void {
    this.selectedTabLabel = this.tabGroup?._tabs?.first.textLabel;
    this.TabChangeService.changeTab(this.selectedTabLabel);
    setTimeout(() => {
    this.table.displayMyTable();
    })
  }

第二次尝试：将 ViewChild 更改为 ViewChildren

  @ViewChildren('table') table: QueryList<AnotherComponent>;

,

您可以尝试使用 html 标签的隐藏属性代替 *ngIf 来解决问题。我认为的问题是 html dom 没有 ngif 元素，因此当您尝试访问 Typescript 文件中的此元素时会出现此错误。 你的代码应该是 -

 <mat-tab label="Some1" [hidden]="!arrayNames.includes('Some1')">
        <ng-template matTabContent>
            <my-table #table></my-table>
        </ng-template>
    </mat-tab>

    <mat-tab label="Some2" [hidden]="!arrayNames.includes('Some2')">
        <ng-template matTabContent>
            <my-table #table></my-table>
        </ng-template>
    </mat-tab>

    <mat-tab label="Some3" [hidden]="!arrayNames.includes('Some3')">
        <ng-template matTabContent>
            <my-table #table></my-table>
        </ng-template>
    </mat-tab>