时间戳

首页 > 解决方案 > 当 selectedIndex 异步更改时，mat-dialog 上的 Mat-tabs 不起作用

angular - 当 selectedIndex 异步更改时，mat-dialog 上的 Mat-tabs 不起作用

问题描述

在 mat-dialog 上渲染 mat-tabs 时出现问题。我使用 selectedIndex 动态选择选项卡的索引，并且我想异步更改它，例如服务器端调用或 setTimeout。但它不起作用。选项卡正文不显示该索引的内容。我在 stackblitz 中重现它。

https://stackblitz.com/edit/mat-tabs-on-mat-dialog-problem

注意：我知道它可以使用 500 毫秒的 setTimeout 来解决。但这不是预期的解决方案。

标签： angularangular-materialmat-tab

解决方案

*ngIf您可以通过添加指令来确保内容的显示。这确保了内容的显示，但它会让你在开始时失去动画：

<mat-tab-group *ngIf="selectedIndex!=undefined" [selectedIndex]="selectedIndex">
  <mat-tab label="First"> Content 1 </mat-tab>
  <mat-tab label="Second"> Content 2 </mat-tab>
  <mat-tab label="Third"> Content 3 </mat-tab>
</mat-tab-group>

推荐阅读