相关疑难解决方法(0)

题

显示模板中相应元素后获取@ViewChild最优雅的方法是什么？以下是一个例子.也有Plunker可用.

模板:

<div id="layout" *ngIf="display">
    <div #contentPlaceholder></div>
</div>

零件:

export class AppComponent {

    display = false;
    @ViewChild('contentPlaceholder', {read: ViewContainerRef}) viewContainerRef;

    show() {
        this.display = true;
        console.log(this.viewContainerRef); // undefined
        setTimeout(()=> {
            console.log(this.viewContainerRef); // OK
        }, 1);
    }
}

我有一个默认隐藏其内容的组件.当有人调用@ViewChild方法时,它变得可见.但是,在角度2变化检测完成之前,我无法参考show().我通常将所有必需的操作包装成viewContainerRef如上所示.有更正确的方法吗？

我知道有一个选项setTimeout(()=>{},1),但它会导致太多无用的通话.

答案(Plunker)

我应该如何配置新的Angular 8视图子级？

@ViewChild('searchText', {read: ElementRef, static: false})
public searchTextInput: ElementRef;

与

@ViewChild('searchText', {read: ElementRef, static: true})
public searchTextInput: ElementRef;

哪个更好？什么时候应该使用static:truevs static:false？

所以我在Angular 5应用程序中有一个工作的角度材料数据表,但是当我尝试添加排序功能时(基于这里的官方文档:https://material.angular.io/components/table/overview#sorting和例如:https://stackblitz.com/angular/dnbermjydavk？file = app%2Ftable-overview-example.html)我无法让它工作.它似乎添加了排序功能/箭头,我可以点击它,但没有任何反应.

这是我的HTML:

<div class="container">
  <mat-table #table class="dataTable" *ngIf="showDataForm;else loadingTemplate" [dataSource]="dataSource" matSort>
    <ng-container matColumnDef="id">
      <mat-header-cell *matHeaderCellDef mat-sort-header>ID</mat-header-cell>
      <mat-cell *matCellDef="let item">{{item.id}}</mat-cell>
    </ng-container>
    <ng-container matColumnDef="titel">
      <mat-header-cell *matHeaderCellDef mat-sort-header>Titel</mat-header-cell>
      <mat-cell *matCellDef="let item">{{item.titel}}</mat-cell>
    </ng-container>
    <ng-container matColumnDef="EADDraftingStage">
      <mat-header-cell *matHeaderCellDef mat-sort-header>EADDraftingStage</mat-header-cell>
      <mat-cell *matCellDef="let item">{{item.EADDraftingStage}}</mat-cell>
    </ng-container>

    <mat-header-row *matHeaderRowDef="columnsToDisplay"></mat-header-row>
    <mat-row *matRowDef="let item; columns: columnsToDisplay"></mat-row>
  </mat-table>

  <mat-paginator [pageSize]="10" [pageSizeOptions]="[5, 10, 25]" showFirstLastButtons></mat-paginator>
</div>

<ng-template #loadingTemplate>
  <div>
      <p>Please wait, the data is loading...</p>
      <img src="../../assets/giphy.gif">
  </div>
</ng-template>

<button mat-raised-button class="submitButton" …