Angular项目mat-tab组件tabPanel属性报错求助

核心原因 #

Angular Material 的 <mat-tab> 组件不存在 tabPanel 这个输入属性，你错误地给每个 <mat-tab> 添加了这个无效绑定，同时组件内声明的 formPanel/tablePanel/chartPanel 变量也没有实际用途。

修复步骤 #

1. 修正HTML模板 #

移除所有 <mat-tab> 标签上的 [tabPanel] 属性：

<!-- 原错误代码 -->
<mat-tab label="Formulaire" [tabPanel]="formPanel">
<!-- 修正后 -->
<mat-tab label="Formulaire">

所有三个tab都要做同样修改，最终的tab部分代码如下：

<mat-tab-group>
    <mat-tab label="Formulaire">
        <ng-template matTabContent>
            <!-- 表单内容保持不变 -->
        </ng-template>
    </mat-tab>

    <mat-tab label="Tableau">
        <ng-template matTabContent>
            <!-- 表格内容保持不变 -->
        </ng-template>
    </mat-tab>

    <mat-tab label="Graphiques">
        <ng-template matTabContent>
            <!-- 图表内容保持不变 -->
        </ng-template>
    </mat-tab>
</mat-tab-group>

2. 清理组件冗余代码 #

删除组件类中无用的变量声明：

// 移除这三行
formPanel: any;
tablePanel: any;
chartPanel: any;

3. 修复模块配置问题（重要） #

你的TestPageModule中存在配置错误：

• declarations数组为空，非独立组件必须放入这个数组
• 非独立组件不能放在imports数组中

修正后的模块代码：

@NgModule({
  declarations: [
    TestPageComponent,
    NavbarComponent,
    BreadcrumbComponent,
    ChartComponent,
    TableComponent
  ],
  imports: [
    CommonModule,
    FormsModule,
    RouterModule,
    MatButtonModule,
    MatInputModule,
    MatSelectModule,
    MatTableModule,
    MatDatepickerModule,
    MatNativeDateModule,
    MatFormFieldModule
  ],
  providers: [
    { provide: DateAdapter, useClass: NativeDateAdapter },
  ],
  exports: [
    TestPageComponent
  ],
  schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class TestPageModule {}

4. 清理组件重复导入（可选优化） #

组件的imports数组中有重复的MatFormField、MatLabel、MatError，合并为单次导入：

imports: [
  NavbarComponent,
  BreadcrumbComponent,
  FormsModule,
  MatFormField,
  MatLabel,
  MatError,
  NgIf,
  TableComponent,
  ChartComponent,
  MatButton,
  MatInput,
  MatTabGroup,
  MatTab,
  MatTabContent
],

完成以上步骤后，项目即可正常运行。

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