我怎样才能专注于特定的 mat-tab-Java 学习之路

<mat-tab-group mat-stretch-tabs #tabGroup (focusChange)="tabChanged($event)" [selectedIndex]="0">
    <mat-tab label="DATOS EXPEDIENTE">
      <div class="example-large-box mat-elevation-z4">
        <app-informe-expediente></app-informe-expediente>
      </div>
    </mat-tab>
    <mat-tab label="DATOS ALTERACIÓN">
      <div class="example-large-box mat-elevation-z4">
        <app-informe-alteracion></app-informe-alteracion>
      </div>
    </mat-tab>
    <mat-tab label="DATOS INMUEBLES">
      <div class="example-large-box mat-elevation-z4">
        <app-informe-inmuebles></app-informe-inmuebles>
      </div>
    </mat-tab>
    <mat-tab label="FLUJO DE TRAMITACIÓN">
      <div class="example-large-box mat-elevation-z4">
        <app-informe-tramitacion></app-informe-tramitacion>
      </div>
    </mat-tab>
    <mat-tab label="DOCUMENTOS ASOCIADOS">
      <div class="example-large-box mat-elevation-z4">
        <app-informe-documentos></app-informe-documentos>
      </div>
    </mat-tab>
</mat-tab-group>

这是我的mat-tab-group，它取决于浏览器，因此每次单击我的提交按钮时都会触发。我需要知道每次单击提交按钮时，如何获得索引为 0 的第一个选项卡。
我知道它与索引和那些东西有关，但我不知道，我用 MatTabChangeEvent 控制索引。

1 回答

您可以在selectedIndex上使用双向绑定来跟踪选择的选项卡，并在单击按钮时将selectedIndex设置为 0

模板

<mat-tab-group [(selectedIndex)]=selectedIndex>
  <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>

<button mat-raised-button (click)="selectedIndex = 0">
  Reset tab
</button>

零件

@Component({
  selector: 'tab-group-basic-example',
  templateUrl: 'tab-group-basic-example.html'
})
export class TabGroupBasicExample {
  selectedIndex = 0;
}

回复于 2024-04-20T16:36:38+08:00

我怎样才能专注于特定的 mat-tab

1 回答

相关问题