嵌套的 Angular 材质选项卡

问题描述：

我需要将动态选项卡添加到某些 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 材质选项卡

相关推荐