动态选项卡与内容：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. 所有选项卡都会填充最后一个选择选项卡的值。

- newAngs

---

请展示一下你的数据是如何看起来的，包括selectedTabs和tabsData。 - undefined

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>

- Mridul

---

非常感谢您的快速反馈。根据您的回答，我已经修改了我的问题。很抱歉，这是我的错误。 - undefined

你能为这个创建一个 StackBlitz 示例吗？ - undefined

Answer 2

我不确定，但建议您使用mat-tree，它将有常量数据，通过使用此数据源将被创建。您可以使用此stack-blitz链接，在那里，根据大陆名称，我动态调用了国家列表。虽然大多数是硬编码的，但您可以参考并进一步优化。

动态选项卡的Stackblitz示例

- rams

---

这个解决了我的问题，还有其他的方法可以继续吗？ - undefined