angular - 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 是下划线，就像没有一个被选中：/

这是一个重现问题的stackblitz：https ://stackblitz.com/edit/angular-oykb2e?file=app/tab-group-dynamic-example.html

例如，工作：

不工作：

Answer 1

我通过检查*ngIf="selectedIndex==1"第二个选项卡解决了它。

看看这个演示。