嵌套角度材质选项卡

我需要向某些添加动态选项卡User Preferences屏幕。 主首选项选项卡可以是具有静态内容的静态选项卡，但第二个选项卡应该嵌套mat-tab元素。

这些额外的动态首选项来自后端，然后我可以使用*ngFor渲染额外的选项卡。

我现在看到的问题是选项卡labels。标签文本从第一个嵌套选项卡获取其值，而不是从label我正在设置的属性。

请在 stackblitz 上查看我的示例 -

在线项目的代码片段是：

<mat-tab-group>

...

<mat-tab label="More Dynamic Preferences">

    <!-- NESTED HERE -->    
    <mat-tab-group>
      <mat-tab *ngFor="let tab of asyncTabs | async">
        <ng-template mat-tab-label>{{tab.label}}</ng-template>
        {{tab.content}}
      </mat-tab>
    </mat-tab-group>

  </mat-tab>
  
</mat-tab-group>    

如果单击“更多动态首选项”选项卡，则选项卡标题文本将变为“First”。同样的情况发生在第二个选项卡上，我正在同步加载其选项卡内容，而不是异步示例。

此问题是由为选项卡设置标签的方式引起的。

您正在使用属性标签设置父级标签，但是对于子选项卡，您使用了模板方式来定义它。

<ng-template mat-tab-label>{{tab.label}}</ng-template>

因此，您可以做的就是定义相同的父选项卡标签，或者也为子选项卡添加标签属性。

这是工作副本 -https://stackblitz.com/edit/mat-tabs-nested-n77qed https://stackblitz.com/edit/mat-tabs-nested-n77qed