selectedIndex 不適用於多個 mat-tab-group

Question

我有多個 mat-tab-group 到一個 HTML 頁面中，例如：

    <mat-card class="card-app-content">
        <mat-tab-group [(selectedIndex)]="selectedIndex">
            ...
        </mat-tab-group
    </mat-card>

    <mat-card class="card-app-content">
        <mat-tab-group [(selectedIndex)]="selectedIndexMedia">
            ...
        </mat-tab-group
    </mat-card>

    <mat-card class="card-app-content">
        <mat-tab-group [(selectedIndex)]="selectedIndexHistory">
             ...
        </mat-tab-group
    </mat-card>

我的 .ts 包含：

    selectedIndex           : number = 0;
    selectedIndexMedia      : number = 0;
    selectedIndexHistory    : number = 0;

在第一個 mat-tab-group 中，索引 0 被很好地選擇（第一個 mat-tab 是下划線）但對於其他兩個，沒有 mat-tab 是下划線，就像沒有一個被選中：/

這是一個重現問題的堆棧閃電戰： https ://stackblitz.com/edit/angular-oykb2e?file = app/tab-group-dynamic-example.html

例如，工作：

不工作：

Answer 1

我通過在第二個選項卡上檢查*ngIf="selectedIndex==1"來解決它。

看看這個演示。