Событие запускается дважды, если установить флажок внутри <div>в Angular5.

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>

-------- ---------- ц

  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 });
    }
}