Question

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

这些额外的动态偏好设置来自后端，然后我可以使用*ngFor来渲染额外的标签。

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

请在stackblitz上查看我的示例-https://stackblitz.com/edit/mat-tabs-nested?embed=1&file=app/tab-group-async-example.html

在线项目中的代码段为：

<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>

如果单击“更多动态首选项”选项卡，则选项卡标题文本将变为“第一”。与第二个选项卡相同，与异步示例相反，我正在同步加载其选项卡内容。

Answer 1

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

您正在使用属性标签设置父标签，但是对于子标签，您已经使用模板方法对其进行了定义。

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

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

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

Answer 2

我不确定<ng-template>的目的在<mat-tabs>元素中是什么，但是在删除这些元素之后，请向制表符组件的label输入添加一些绑定，并重构异步调用以不使用setTimeout()并使用本机rxjs操作，我有一个使用演示选项卡和动态选项卡创建的工作演示：

  <mat-tab label="Customer Preferences"> 
    <h2>HERE ARE YOUR PREFERENCES</h2>
  </mat-tab> 

  <mat-tab label="Dynamic Preferences">
    <mat-tab-group>
      <mat-tab *ngFor="let tab of prefTabs" [label]="tab.label">
        {{tab.content}}
      </mat-tab>
    </mat-tab-group>
  </mat-tab>

  <mat-tab label="More Dynamic Preferences">
    <mat-tab-group>
      <mat-tab *ngFor="let tab of asyncTabs | async" [label]="tab.label">
        {{tab.content}}
      </mat-tab>
    </mat-tab-group>
  </mat-tab>

Updated stackblitz

嵌套的Angular材质标签

2 个答案: