嵌套选项卡组上的 Angular Material 选项卡组问题(未显示默认选项卡)

标签 angular nested angular-material

我面临以下问题,将 mat-tab-group 嵌套在 mat-tab-group 中。父组第一个选项卡中的嵌套组选择默认选项卡并在第一个选项卡中显示下划线,但嵌套在父组第三个选项卡中的组,在任何选项卡中都不显示下划线。

我附上了问题的演示链接:https://stackblitz.com/edit/angular-material-tabs-problem

有什么帮助吗?提前致谢!

最佳答案

正如这篇文章所暗示的那样 https://github.com/angular/components/issues/7274#issuecomment-605516292<ng-template matTabContent> 包裹您的 child mat-tab-group它会工作(用 Angular 8 测试)。

<mat-tab-group>
  <mat-tab label="Tab1">
    Test1
  </mat-tab>
  <mat-tab label="Tab2" >
    <ng-template matTabContent>
      <mat-tab-group>
        <mat-tab label="Tab2-1">
          Test2-1
        </mat-tab>
        <mat-tab label="Tab2-2">
          Test2-2
        </mat-tab>
      </mat-tab-group>
    </ng-template>
  </mat-tab>
</mat-tab-group>

关于嵌套选项卡组上的 Angular Material 选项卡组问题(未显示默认选项卡),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53826498/

相关文章:

Angular Material 日期选择器无法动态命名

Angular Reactive Form 检查 FormControl 是否存在于测试中

angular - 单击行扩展 prime-ng 的 p 表行

javascript - 如何在 FuelUX 树 Bootstrap 插件中显示嵌套数据项

JavaScript 子方法

javascript - AngularJS 和 Angular Material 性能问题

javascript - Angular 2 中的哈希定位策略

grid - JqWidgets:导出嵌套网格

angularjs - 如何在 Angular Material md-autocomplete 中禁用自动填充

html - Angular Material 表 : unbind checkbox click from row