Angular中mat-tab-group结合ngFor动态设置tabindex失效问题排查

你试图通过给mat-tab设置tabindex来控制默认激活的标签页，但这是对Angular Material组件的误用，原因如下：

1. mat-tab不支持通过tabindex控制选中状态
   mat-tab是Angular Material封装的组件，它的DOM结构会被组件内部逻辑重写，你手动设置的tabindex不会被应用到实际的可交互标签元素上，反而会被组件的内部可访问性逻辑覆盖为-1。

2. 控制默认选中标签页的正确方式是selectedIndex
mat-tab-group组件提供了selectedIndex输入属性，专门用于指定默认激活的标签页索引，这是官方推荐的标准用法。

修正后的代码实现 #

模板部分：

<div class="div-center-card">
  <mat-tab-group #billingTabs [selectedIndex]="activeTabIndex">
    <mat-tab *ngFor="let billing of billingList; let i = index" label="{{getLabel(billing)}}">
      <app-ast-billing-form [billingToEdit]="billing" formMode="put"></app-ast-billing-form>
    </mat-tab>

    <mat-tab label="{{getLabel(null)}}">
      <app-ast-billing-form [newLabelNumber]="getnewLabelNumber()" formMode="post"></app-ast-billing-form>
    </mat-tab>
  </mat-tab-group>
</div>

组件类部分（示例）：

import { Component } from '@angular/core';

@Component({
  selector: 'your-component-selector',
  templateUrl: './your-component.component.html'
})
export class YourComponent {
  billingList: any[] = []; // 替换为你的实际数据列表
  // 默认选中第一个动态标签页；若要默认显示新增标签页，设为 this.billingList.length
  activeTabIndex = 0;

  getLabel(billing: any): string {
    // 替换为你的标签文本生成逻辑
    return billing ? `编辑 ${billing.id}` : '新增对象';
  }

  getnewLabelNumber(): number {
    // 替换为你的编号生成逻辑
    return this.billingList.length + 1;
  }
}

补充说明 #

• 移除所有mat-tab上的tabindex属性，它们不会起作用
• selectedIndex的值对应标签页的顺序索引：动态标签页按billingList顺序从0开始，新增标签页的索引是billingList.length（因为它在所有动态标签页之后）

内容的提问来源于stack exchange，提问作者Raziel