Dynami c Вкладки с содержанием: Angular Материал

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>

Затем для каждой вкладки мне нужно показать разные данные. Например, вкладка с названием «Азия» будет отображать Индию, Пакистан, Китай, а вкладка с названием «Америка» - список Южной Америки, Нью-Йорка, Бразилии и др. c.,.

Лог c, который я пытался получить, передавая список значений в tabsData, взяв табуляцию, когда пользователь щелкает по ней. Но у него есть следующий недостаток:

1. Я не могу получить заголовок вкладки в бэкэнде, пока я нажимаю на заголовок. Сам метод не вызывается.
2. Все вкладки заполняют значения последней выбранной вкладки.

Answer 1

Я не уверен, но я предлагаю вам использовать mat-tree, у которого будет постоянная данных, с помощью которой будет создан источник данных. Вы можете использовать эту стек-блиц-ссылку, где на основе названия континента я динамически назвал список стран . Хотя большинство из них жестко запрограммированы, вы можете ссылаться и оптимизировать их дальше.

Пример Stackblitz для Dynami c 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>