@ViewChild 未在 ngAfterViewInit 中定义答案

【问题标题】：@ViewChild not defined in ngAfterViewInit@ViewChild 未在 ngAfterViewInit 中定义
【发布时间】：2021-07-26 18:41:24
【问题描述】：

我遇到了 *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 is undefined'

【问题讨论】：

标签： html angular typescript dom viewchild

【解决方案1】：

您可以考虑尝试两件事：

首先：用 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&lt;AnotherComponent&gt;;

【讨论】：

你能用 Stackblitz 重现你的问题吗？帮助你会更容易
在它之前，你可以试试：@ViewChild(AnotherComponent, { static: false }) table: AnotherComponent;

【解决方案2】：

您可以尝试使用 html 标签的 hidden 属性而不是 *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>

【讨论】：