绑定到角度 mat-checkbox 的选中属性的方法被多次触发

Question

我有一个嵌套的 JSON 数组，我通过它迭代来显示数据。每个对象都呈现为一个复选框，如果与名为“checked”的嵌套选项关联的值为 true，则选中复选框。如果该字段未选中，则“选中”选项设置为 false。 下面是带有一个对象的 HTML 代码和示例 JSON：

<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>
        {{dm.name}} &nbsp;&nbsp;
      </mat-panel-title>
    </mat-expansion-panel-header>
    <section>
      <div *ngFor="let fd of dm.fields; let lst = last; let fst = first; let fidx = index;">
        <div class="row pad-left-1">
          <div class="col-md-12 col-xs-12">
                <mat-checkbox class="example-margin" color="primary" [checked]="checkSelected(midx, fidx)" (change)="onFieldChange(midx, fidx, $event)"
                [disabled]="fd.field.required" disableRipple>
                {{fd.field.fieldname}}
                <span *ngIf="fd.field.required" matTooltip="This field is required" style="color:#dc3545;">*</span>
                </mat-checkbox> &nbsp;
            </div>
        </div>
      </div>
    </section>
  </mat-expansion-panel>
</ng-container>

JSON：

data : [
    {   
        name: 'ABC',
        description: ''
        fields: [
            {
                field: {
                    fieldname: 'field1'
                    required: true
                },
                options: [
                    { field: {
                        fieldname: 'checked',
                        fieldtype: boolean,
                        fieldvalue: true
                      }
                    },
                    { field: {
                        fieldname: 'someoption'
                        fieldtype: string,
                        fieldvalue: 'maybestring'
                      }
                    }
                ]
            },
            {
                field: {
                    fieldname: 'field2'
                    required: false
                },
                options: [
                    { field: {
                        fieldname: 'checked',
                        fieldtype: boolean,
                        fieldvalue: false
                      }
                    },
                    { field: {
                        fieldname: 'someoption2'
                        fieldtype: string,
                        fieldvalue: 'maybestring'
                      }
                    }
                ]
            }
        ]
    }
]

当页面加载时，默认情况下通过将复选框绑定到方法checkSelected() 并在更改时调用 onFieldChange() 来勾选复选框。

checkSelected(midx, fidx) {
    //iterate over data and look for fieldvalue of checked option and return the value
}

onFieldChange(midx, fidx, $event) {
    //Iterate over data and set value as per the event to checked option
}

但问题是checkSelected() 在页面加载/打开或关闭扩展面板/选中复选框时调用onFieldChange() 时多次调用。

我确定没有对 checkSelected() 进行隐藏调用，但不知何故，它被多次调用（针对整个对象 - 遍历每个字段）导致expressionChangedAfterItHasBeenCheckedError我尝试设置一些标志（其他逻辑需要）。

如果有人可以指导我理解为什么绑定到属性的函数会被多次触发以及如何修复它！非常感谢任何帮助

Answer 1

不要绑定[checked] 和(change)，而是使用[(ngModel)] - 类似于[(ngModel)]="fd.options[0].field.fieldvalue"。