代码之家 › 专栏 › 技术社区 › prabhat gundepalli

角度:仅为渲染选项卡调用SelectedTabChange

mat-tab angular-material2 rendering typescript angular

prabhat gundepalli · 技术社区 · 7 年前

setGridHeight 在里面 .

<mat-tab-group [dynamicHeight]="true" (selectedTabChange)='queue0.setGridHeight();queue1.setGridHeight();queue2.setGridHeight();'>
  <mat-tab *ngIf='showQueues[0]'>
    <ng-template mat-tab-label>
      <i class="fa fa-share-square" routerLink="/queue/0" style="color: rgb(8, 148, 148)"></i>Queue 0
    </ng-template>
    <fph-queue-0 #queue0 [rowData]="queue0Items$ | async">
    </fph-queue-0>
  </mat-tab>
  <mat-tab *ngIf='showQueues[1]'>
    <ng-template mat-tab-label>
      <i class="fa fa-share-square" routerLink="/queue/1" style="color: rgb(8, 148, 148)"></i>Queue 0
    </ng-template>
    <fph-queue-1 #queue1 [rowData]="queue1Items$ | async">
    </fph-queue-1>
  </mat-tab>
  <mat-tab *ngIf='showQueues[2]'>
    <ng-template mat-tab-label>
      <i class="fa fa-share-square" routerLink="/queue/2" style="color: rgb(8, 148, 148)"></i>Queue 0
    </ng-template>
    <fph-queue-2 #queue2 [rowData]="queue2Items$ | async">
    </fph-queue-2>
  </mat-tab>
</mat-tab-group>

所以在TS代码的每个组件中,我调用一个名为 设置网格高度 这叫做选项卡更改。

*ngIf ,的 selectedtabChange

例如: showQueues = [true, false, true];

showQueues[1] = false queue1.setGridHeight() 引发异常 Cannot read property 'setGridHeight' of undefined .

3 回复 | 直到 7 年前

Sunil Singh 7 年前

最快的解决办法之一就是改变 *ngIf 到 [hidden]

<mat-tab-group [dynamicHeight]="true" (selectedTabChange)='queue0.setGridHeight();queue1.setGridHeight();queue2.setGridHeight();'>
  <mat-tab [hidden]='!showQueues[0]'>
    <ng-template mat-tab-label>
      <i class="fa fa-share-square" routerLink="/queue/0" style="color: rgb(8, 148, 148)"></i>Queue 0
    </ng-template>
    <fph-queue-0 #queue0 [rowData]="queue0Items$ | async">
    </fph-queue-0>
  </mat-tab>
  <mat-tab [hidden]='!showQueues[1]'>
    <ng-template mat-tab-label>
      <i class="fa fa-share-square" routerLink="/queue/1" style="color: rgb(8, 148, 148)"></i>Queue 0
    </ng-template>
    <fph-queue-1 #queue1 [rowData]="queue1Items$ | async">
    </fph-queue-1>
  </mat-tab>
  <mat-tab [hidden]='!showQueues[2]'>
    <ng-template mat-tab-label>
      <i class="fa fa-share-square" routerLink="/queue/2" style="color: rgb(8, 148, 148)"></i>Queue 0
    </ng-template>
    <fph-queue-2 #queue2 [rowData]="queue2Items$ | async">
    </fph-queue-2>
  </mat-tab>
</mat-tab-group>

Learning 7 年前

检查queue1是否未定义且不为空:

If (undefined !== queue1 && queue1 != null) {
  queue1.setGridHeight();
}

Pankaj Parkar 7 年前

理想情况下,您应该将单个模板变量名设置为所有选项卡内容,例如 #queue ViewChildren 像下面这样

@ViewChildren('queue', {read: ViewContainerRef}) queue;

ViewContainerRef

它将返回 #排队 模板变量,现在您可以轻松循环 selectedTabChange

onTabChanged () {
    this.queue.forEach(q => q.setGridHeight());
}

Demo Here

推荐文章

Shishir Karki · 在react(typescript)项目上未渲染图像

2 年前

Aresta · 使用某些库在PDF上显示PNG印章时出现问题

2 年前

german devia · 光标进入图像时闪烁的图像

2 年前

Hannan Yusuf Khan · 无法呈现,REACT

2 年前

Kay · 更新React状态(对象数组)和组件转发器,但在另一个状态更新之前,显示不会更改

2 年前

Urooj · 具有async属性的脚本是在单独的线程上执行,还是在与JavaScript中的HTML解析器相同的线程上运行?

3 年前

Reinhard Männer · 不理解SwiftUI文本布局

3 年前

laith drebaty · 如何在我的django后端获得一个反应页面以通过邮件发送

3 年前

nona · Pyrender中的世界到像素转换

3 年前

user22192981 · 如何使用像素阵列在Java中读取和渲染字体?

3 年前