2

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

这些额外的动态首选项来自后端，然后允许我使用 an*ngFor来呈现额外的选项卡。

我现在看到的问题是 tab 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>

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

4

2 回答 2

4

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

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

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

所以你可以做的是要么定义父标签的标签相同，要么也为子标签添加标签属性。

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

于 2018-11-07T18:07:26.310 回答
1

我不确定元素中<ng-template>s的用途是什么<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>

更新堆栈闪电战

于 2018-11-07T18:00:44.363 回答