包含内容的动态选项卡：Angular Material

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-tree，它具有数据常量，通过使用它可以创建数据源。您可以使用这个 stack-blitz 链接，其中，根据大陆名称，我动态调用了国家/地区列表。虽然其中大部分是硬编码的，但您可以进一步参考和优化。

Stackblitz Example for Dynamic Tabs

Answer 2

你可以试试这种方式动态加载标签

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