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

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

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