带有内容的动态标签：角材质

Question

我的应用程序中有两个选项卡，我使用 ngFor 实现了相同的功能。 相同的代码是，

 <mat-tab-group >
  <mat-tab (click)="testMethod2GetTitle(tabtitle)" *ngFor="let tabtitle of selelectedTabs; let index = index" [label]="tabtitle"  class="tab-title"> 
        <mat-selection-list >
          <mat-list-option  *ngFor="let list of tabsData" >

                 {{list}}
                </mat-list-option>
            </mat-selection-list>

  </mat-tab>
  </mat-tab-group>

然后对于每个选项卡，我需要显示不同的数据。 例如，标题为亚洲的选项卡将显示印度、巴基斯坦、中国，标题为“美国”的选项卡将显示南美洲、纽约、巴西等的列表。

我试图通过在用户单击时获取 tabstitle 来将值列表传递给 tabsData 的逻辑。 但它有以下缺点：

1. 当我单击标题时，我无法在后端获取选项卡的标题。未调用该方法本身。
2. 所有选项卡都会填充上次选择的选项卡的值。

Answer 1

您可以尝试这种方式来动态加载选项卡

 <mat-tab-group>
  <mat-tab *ngFor="let tabtitle of selelectedTabs; let index = index" class="tab-title">
    <ng-template mat-tab-label>{{tabtitle}}</ng-template>
    <mat-selection-list >
      <mat-list-option  *ngFor="let list of tabsData" >
             {{list}}
            </mat-list-option>
        </mat-selection-list>
  </mat-tab>
</mat-tab-group>

Answer 2

我不确定，但我建议您使用具有数据常量的 mat-tree，通过使用它将创建数据源。 您可以使用此 stack-blitz 链接，其中，我根据大陆名称动态调用 country list 。 尽管其中大多数是硬编码的，但您可以进一步参考和优化。

动态选项卡的 Stackblitz 示例