остановка не работает должным образом в angular 8 - PullRequest
Новая
       3

остановка не работает должным образом в angular 8

0 голосов
/ 02 марта 2020

Вот пример html макета моего компонента: 

<div class="row align-content-start m-0">
  <div *ngFor="let child of list$ | async" class="col-12 mb-3" (click)="clickFunction(child)">
    <div class="d-flex align-items-center">
      <div class="flex-grow-1 border-left px-2 h-100 py-2">
       NAME
      </div>
      <div class="d-flex" (click)="selectDefault($event,child)" *ngIf="isEdit && child.isChecked">
    <i id="company_default" class="material-icons" [ngClass]="child.isDefault ? 'icon-success':''">flag</i>
  </div>
  <div class="custom-control custom-checkbox" *ngIf="isEdit">
    <input name="{{child.name}}" id="id_{{child.name}}" type="checkbox"
      class="custom-control-input" [(ngModel)]="child.isChecked" (change)="checkBoxSelection($event)" />
    <label class="custom-control-label" for="id_{{child.name}}">
    </label>
  </div>
</div>

Теперь, как вы можете видеть, есть три функции, которые вызываются на основе событий. selectDefault() работает нормально, но если я выберу флажок, то будут вызваны checkBoxSelection() и clickFunction(). При выборе флажка я не хочу запускать clickFunction(). Вот функция флажка: 

checkBoxSelection(event: Event) {
  event.stopPropagation();
 }

Пожалуйста, помогите мне выяснить проблему / решение.

Ответы [ 3 ]

1 голос
/ 02 марта 2020

Я думаю, что у вас есть проблема из-за двух разных событий - click и change.

Посмотрите здесь Машинопись 3 Angular 7 StopPropagation и PreventDefault не работают

Надеюсь, что это поможет!

0 голосов
/ 02 марта 2020

Спасибо всем за ваше руководство. Это решит мою проблему. 

<div class="custom-control custom-checkbox" *ngIf="isEdit" (click)="$event.stopPropagation()">
  <<<<checkbox here >>>>>>>
</div>
0 голосов
/ 02 марта 2020

два события происходят в фоновом режиме, которые не имеют никакого отношения друг к другу. 1. изменение модели флажка 2. щелкнув флажок

, вы можете попробовать сделать что-то вроде этого 

<input name="{{child.name}}" id="id_{{child.name}}" type="checkbox"
      class="custom-control-input" [(ngModel)]="child.isChecked" (change)="checkBoxSelection($event)" (click)="$event.stopPropagation()"  />

Надеюсь, это поможет!

...