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的逻辑。但是它具有以下缺点：

单击标题时，我无法在后端获取选项卡的标题。方法本身未调用。
所有标签都填充上一个选定标签的值。

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，它将具有数据常量，通过使用该树，将创建数据源。您可以使用此堆叠闪电战链接，其中基于洲名，我动态地将其称为国家/地区列表。尽管它们大多数都是硬编码的，但是您可以参考并进一步优化。

Stackblitz Example for Dynamic Tabs

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

2 个答案: