使用转到下一个选项卡时按钮未使用角材料出现

Question

我正在使用angular material 标签库来显示垂直和水平标签。有 3 个水平选项卡，在第 2 个水平选项卡中，有垂直选项卡。当我放Next 按钮时，它应该转到下一个水平选项卡。它正在使用第一个水平选项卡，但在第二个水平选项卡中 Next 按钮没有出现。

这里是：stackblitz - ngular-material-tabs-inside-tab

在第二个水平选项卡的 tab-group-basic-example.html 中，我输入了Next 按钮：

<div class="m-10">
   <button (click)="nextTab(2)">Next</button>
</div>

在 ts 文件中：

nextTab(index: number): void {
    this.selectedIndex = index;
}

Answer 1

看起来问题是你想在mat-tab之外显示一些东西。将下一个按钮移到其中就可以了：

        <mat-tab *ngFor="let tab of tabs; let index = index" [label]="tab">
          <div class="m-10" #appenHere></div>
          Contents for {{tab}} tab <br> <br>
          <button (click)="addNewComponent()">
            Append to {{tab}}
          </button>
          <div class="m-10">
            <button (click)="nextTab(2)">Next</button>
          </div>
        </mat-tab>