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

Posted 2021-05-06

我有一个嵌套的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（）。

我确信没有对checkedSelected（）进行任何隐藏调用，但不知怎的，它被多次调用（对于整个对象 - 遍历每个字段），每当我尝试设置一些标志时（其他逻辑需要），导致expressionChangedAfterItHasBeenCheckedError。

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