角度材料選項卡活動問題

Question

我是 Angular 和 Angular Material 的初學者，我使用了 mat-tab

活動的 mat-tab 總是第一個選項卡，有人知道在使用 Angular 材料時如何激活第二個選項卡嗎？

代碼

<mat-tab-group>
      <mat-tab label="First"> Content 1 </mat-tab>
      <mat-tab label="Second"> Content 2 </mat-tab>
      <mat-tab label="Third"> Content 3 </mat-tab>
    </mat-tab-group>

Answer 1

使用selectedIndex屬性

<mat-tab-group class="m-t-30" [selectedIndex]="1">

Answer 2

使用 selectedIndex="yourvalue"。 你可以像這樣使用這個屬性

<mat-tab-group class="m-t-30" [selectedIndex]="yourvalue">

或者您始終可以通過為組件中的每個單擊事件添加循環或迭代並增加選項卡的值來動態執行此操作，以防您有很多選項卡。

Answer 3

墊選項卡活動： -

使用 mat-tab-label-active

---

::ng-deep .mat-tab-label-active {
      background-color : red;
      font-size : 15px
    }