angular - ネストされた Angular マテリアル タブ

Question

一部の画面に動的タブを追加する必要がありUser Preferencesます。メインの設定タブは、静的コンテンツを含む静的タブにすることができますが、2 番目のタブにはネストされた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>    

[More Dynamic Preferences] タブをクリックすると、タブのヘッダー テキストが [First] になります。非同期の例とは対照的に、タブコンテンツを同期的にロードしている2番目のタブでも同じことが起こります。