角度材料选项卡活动问题

Question

我是Angular和Angular材质的初学者，我使用过mat-tab

活动的Mat标签始终是第一个标签，任何人都知道如何激活第二个标签 什么时候使用角材料？

代码

<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 =“ yourvalue”。您可以像这样使用此属性

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

或者，您总是可以通过为组件中的每个click事件添加循环或迭代来动态地执行此操作，并在选项卡数量很多的情况下增加选项卡的值。

Answer 2

使用selectedIndex属性

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

Answer 3

Mat标签处于活动状态：-

使用mat-tab-label-active

---

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