嵌套的Angular材质选项卡 [英] Nested Angular material tabs

问题描述

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

I have a requirement for adding dynamic tabs to some User Preferences screen. The main preference tab can be a static tab with static content, but the second tab should have nested mat-tab elements.

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

These additional dynamic preferences come from the backend, which then allows me to use an *ngFor to render the extra tabs.

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

Problem I'm seeing now is with the tab labels. The label text is taking its value from the first nested tab, and NOT from the label property I'm setting.

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

Please see my example here on stackblitz - https://stackblitz.com/edit/mat-tabs-nested?embed=1&file=app/tab-group-async-example.html

在线项目中的代码段为:

A code snippet from the online project is:

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

如果单击更多动态首选项"选项卡，则选项卡标题文本将变为第一".在第二个选项卡上也发生了同样的事情，与异步示例相反，我正在同步加载其选项卡内容.

If you click on "More Dynamic Preferences" tab, then the tab header text becomes "First". Same happens on the second tab, whose tab content I'm loading synchronous, as opposed to the async example.

推荐答案

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

This issue is being caused by the way label is being set for tab.

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

You are setting label of parent with attribute label however for child tab you had used the template way to define it.

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

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

So what you can do is either you define the label of parent tab same or just add label attribute for the child tabs too.

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

这篇关于嵌套的Angular材质选项卡的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！