Вложенные угловые вкладки материала

Question

У меня есть требование для добавления динамических вкладок на экран User Preferences. Основной вкладкой предпочтений может быть статическая вкладка со статическим содержимым, но вторая вкладка должна иметь вложенные элементы mat-tab.

Эти дополнительные динамические настройки исходят из серверной части, что позволяет мне использовать *ngFor для рендеринга дополнительных вкладок.

Проблема, с которой я сейчас сталкиваюсь, связана с вкладкой labels. Текст метки берет свое значение из первой вложенной вкладки, а НЕ из свойства label, которое я устанавливаю.

Пожалуйста, посмотрите мой пример здесь на stackblitz - https://stackblitz.com/edit/mat-tabs-nested?embed=1&file=app/tab-group-async-example.html

Фрагмент кода из онлайн-проекта:

<mat-tab-group>

...

<mat-tab label="More Dynamic Preferences">

    <!-- NESTED HERE -->    
    <mat-tab-group>
      <mat-tab *ngFor="let tab of asyncTabs | async">
        <ng-template mat-tab-label>{{tab.label}}</ng-template>
        {{tab.content}}
      </mat-tab>
    </mat-tab-group>

  </mat-tab>
  
</mat-tab-group>    

Если щелкнуть вкладку «Дополнительные динамические настройки», текст заголовка вкладки становится «Первый». То же самое происходит на второй вкладке, содержимое вкладки которой я загружаю синхронно, в отличие от асинхронного примера.

Answer 1

Эта проблема возникает из-за способа установки метки для вкладки.

Вы устанавливаете метку родителя с меткой атрибута, однако для дочерней вкладки вы использовали способ шаблона, чтобы определить его.

<ng-template mat-tab-label>{{tab.label}}</ng-template>

Итак, вы можете либо определить метку родительской вкладки, либо добавить атрибут метки для дочерних вкладок.

Вот рабочая копия - https://stackblitz.com/edit/mat-tabs-nested-n77qed

Answer 2

Я не уверен, какова цель <ng-template> s в элементах <mat-tabs>, но после их удаления добавьте некоторые привязки к входу label компонентов вкладки и выполните рефакторинг асинхронного вызова для я не использую setTimeout() и использую нативные операции rxjs, у меня есть рабочая демонстрация использования вложенных вкладок с динамическим созданием вкладок:

  <mat-tab label="Customer Preferences"> 
    <h2>HERE ARE YOUR PREFERENCES</h2>
  </mat-tab> 

  <mat-tab label="Dynamic Preferences">
    <mat-tab-group>
      <mat-tab *ngFor="let tab of prefTabs" [label]="tab.label">
        {{tab.content}}
      </mat-tab>
    </mat-tab-group>
  </mat-tab>

  <mat-tab label="More Dynamic Preferences">
    <mat-tab-group>
      <mat-tab *ngFor="let tab of asyncTabs | async" [label]="tab.label">
        {{tab.content}}
      </mat-tab>
    </mat-tab-group>
  </mat-tab>

Обновлен стек