时间戳

首页 > 解决方案 > 包含内容的动态选项卡：Angular Material

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

问题描述

我的应用程序中有两个选项卡，我使用 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. 所有选项卡都填充最后选择的选项卡的值。

标签： angulartabsangular-material

解决方案

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

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

推荐阅读