多次触发了与Angular Mat-Checkbox的检查属性结合的方法

Question

我有一个嵌套的JSON数组，我会迭代显示数据。每个对象都是作为复选框渲染的，如果与称为"检查"的嵌套选项关联的值是正确的，请检查复选框。如果未选中该字段，则"检查"选项将设置为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()和Change 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
}

但是，该问题已在页面加载/打开或关闭扩展面板上多次调用((在选中复选框时都调用onfieldchange((。

我敢肯定没有对checkedSelected((进行隐藏的呼叫，但是以某种方式被称为多次(对于整个对象，对于整个对象 - 在每个字段上迭代(，每当我尝试时，它会导致expressionChangedAfterItHasBeenCheckedError设置一些标志(其他逻辑需要(。

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

Answer 1

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