绑定Angular mat-checkbox的checked属性的方法多次触发问题

我来帮你完善这个需求的实现方案——迭代嵌套JSON数组，将每个对象渲染为带复选框的展开面板，并且让复选框状态和JSON对象的checked属性实时同步。

第一步：定义示例嵌套JSON数据 #

首先我们需要一个符合结构的嵌套数据示例，你可以根据实际需求调整字段：

// 组件类中的示例数据
data = [
  {
    id: 1,
    name: "主分类1",
    checked: false,
    children: [
      { id: 11, name: "子项1-1", checked: true },
      { id: 12, name: "子项1-2", checked: false }
    ]
  },
  {
    id: 2,
    name: "主分类2",
    checked: true,
    children: [
      { id: 21, name: "子项2-1", checked: false },
      { id: 22, name: "子项2-2", checked: true }
    ]
  }
];

第二步：编写HTML模板代码 #

结合你给出的*ngFor和mat-expansion-panel，我们补充完整的复选框绑定和嵌套子项渲染逻辑：

<!-- 主面板迭代 -->
<ng-container *ngFor="let dm of data; let lst = last; let midx = index;">
  <mat-expansion-panel class="mar-bot-1">
    <mat-expansion-panel-header>
      <mat-panel-title>
        <!-- 主项复选框：双向绑定checked属性 -->
        <mat-checkbox [(ngModel)]="dm.checked" (change)="syncChildCheckState(dm)">
          {{ dm.name }}
        </mat-checkbox>
      </mat-panel-title>
    </mat-expansion-panel-header>

    <!-- 嵌套子项迭代 -->
    <div *ngFor="let child of dm.children; let cidx = index;" class="ml-4 mb-2">
      <mat-checkbox [(ngModel)]="child.checked">
        {{ child.name }}
      </mat-checkbox>
    </div>
  </mat-expansion-panel>
</ng-container>

第三步：添加可选的状态同步逻辑（可选） #

如果需要实现“主项勾选时全选子项”的交互，可以在组件类中添加事件处理函数：

// 组件类中的方法
syncChildCheckState(mainItem: any) {
  // 将主项的checked状态同步到所有子项
  mainItem.children.forEach((child: any) => {
    child.checked = mainItem.checked;
  });
}

第四步：确保导入必要的模块 #

要让上述组件和指令正常工作，必须在你的Angular模块中导入以下依赖：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms'; // 必须导入，否则ngModel无法使用
import { MatExpansionModule } from '@angular/material/expansion';
import { MatCheckboxModule } from '@angular/material/checkbox';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; // Angular Material需要动画模块

import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    FormsModule,
    MatExpansionModule,
    MatCheckboxModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

关键说明 #

• 使用[(ngModel)]实现双向数据绑定：勾选/取消复选框时，JSON对象的checked属性会自动更新；反之，修改JSON的checked值，复选框状态也会同步变化。
• *ngFor的lst（是否为最后一项）和midx（索引）参数可以根据你的业务需求使用，比如添加分隔线或处理特定索引的项。
• 子项的ml-4类是Bootstrap风格的缩进类，你也可以自定义CSS来调整子项的缩进样式。

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