单击Angular5中<div>内的复选框时，事件触发两次

Question

我有一个收藏夹，并在此基础上创建了复选框。复选框位于分区内。单击div以及复选框时，我需要选中和取消选中复选框。我在分区上调用click（）事件。当我从分区事件单击时，仅在一次，当我从复选框事件中单击两次时，触发两次，结果是错误的。我该如何处理此问题。在这里，我附加了一组代码。

------ HTML ----------

<div formArrayName="Statuses">
        <div *ngFor="let status of formGroup.get('Statuses').controls;index as i; trackBy: trackByFn">
          <div [formGroupName]="i">
            <div for="test" [ngClass]="[isFilter ? 'col-xl-15 col-lg-4 col-sm-4' : 'col-xl-no-filter col-lg-15',
              status.controls.isActive.value ? 'box-container-selected' : 'box-container', (i >=5 && isNormalDisplay) ||
              (i >=9 && isMediumDisplay) || (isLargeDisplay && i >=11) || (i >=9 && isLargeWithFilter) ||
              (i >=4 && isMobileScreen) ? 'hidden-block' : '']"
              class="box-container t2-filter-block" (click)="onStatusClicked(i,false,$event)">
              <phx-form-control [editable]="true" [layoutType]="layoutType" [control]="status.controls.isActive">
                <label class="radio-inline chk-box">
                  <input class="checkbox" name="test" formControlName="isActive" type="checkbox">
                  <span class="checkmark"></span>
                </label>
              </phx-form-control>
              <span class="entity-count">{{status.controls.Count.value}}</span>
              <p>{{status.controls.DisplayName.value}}</p>
            </div>
          </div>
        </div>
      </div>

-------- ts ----------

  onStatusClicked(index: number, isAllItem: boolean, event) {
    event.stopPropagation();
    if (index >= 0) {
      const arrayData = this.formGroup.get('Statuses') as FormArray<IStatus>;
      const formGroup = arrayData.at(index) as FormGroup<IStatus>;
      formGroup.get('isActive').setValue(!formGroup.get('isActive').value);
    } else {
      this.formGroup.controls.AllItem.setValue(!this.formGroup.get('AllItem').value);
      this.formGroup.get('AllItem').enable({ emitEvent: false, onlySelf: true });
    }
}