Angular 嵌套的角材质选项卡

我需要在一些

用户首选项

屏幕中添加动态选项卡。 主首选项选项卡可以是具有静态内容的静态选项卡，但第二个选项卡应具有嵌套的

mat-tab

元素

这些附加的动态首选项来自后端，它允许我使用

*ngFor

来呈现额外的选项卡

我现在看到的问题是标签

标签

。标签文本从第一个嵌套选项卡获取其值，而不是从我正在设置的

label

属性获取

请参见我在stackblitz上的示例-

联机项目中的代码片段是：

...
{{tab.label}
{{tab.content}

我不确定

元素中

的目的是什么，但在删除这些元素后，向选项卡组件的

标签

输入添加一些绑定，并重构异步调用以不使用

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>

这是你的喜好
{{tab.content}
{{tab.content}

---

我不确定

元素中

的目的是什么，但在删除这些元素后，向选项卡组件的

标签

输入添加一些绑定，并重构异步调用以不使用

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>

这是你的喜好
{{tab.content}
{{tab.content}

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

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

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

{{tab.label}

因此，您可以定义父选项卡的标签，或者只为子选项卡添加标签属性

这是工作副本-

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

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

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

{{tab.label}

因此，您可以定义父选项卡的标签，或者只为子选项卡添加标签属性

---

这是工作副本-

我在使用嵌套选项卡上的

ng模板时遇到问题。这不是渲染。我会检查你的代码。谢谢。根据他们的在线示例，我使用了
{{tab.label}
，但仅仅使用
标签
道具似乎就能完成任务。我在嵌套选项卡上使用
ng模板
时遇到了问题。这不是渲染。我会检查你的代码。谢谢。根据他们的在线示例，我使用了
{{tab.label}
，但仅仅使用
label
道具似乎就可以完成这项工作。ng-template-inside-mat-tabs用于延迟加载选项卡容器的内容。ng-template-inside-mat-tabs用于延迟加载选项卡容器的内容