Флажок внутри * ngЕсли панель не сработает с angular - PullRequest
Новая
       33

Флажок внутри * ngЕсли панель не сработает с angular

0 голосов
/ 07 февраля 2020

Кажется, что флажки внутри условия * ngIf не вызывают событие. Я попытался воспроизвести проблему здесь:

https://stackblitz.com/edit/angular-7-master-uoxd3q

Как видите, мы являемся основным компонентом: 

<div class="fake-accordion" *ngFor="let item of items; let i = index" (click)="item.expanded = !item.expanded">
  <div class="head">
    {{item.name}}
  </div>
  <app-details (click)="$event.stopPropagation(); $event.preventDefault()" *ngIf="item.expanded" [item]="item">
  </app-details>
</div>

, который зацикливает некоторые предметы. Внутри этого l oop есть еще один компонент для деталей. Он открывается, только если item.expanded имеет значение true. Внутри этого есть несколько флажков 

<div class="details-body">
  <div>
    <input type="checkbox" [(ngModel)]="item.flag1" />Flag1
  </div>

   <div>
    <input type="checkbox" [(ngModel)]="item.flag2" />Flag2
  </div>

   <div>
    <input type="checkbox" [(ngModel)]="item.flag3" />Flag3
  </div>
</div>

, но когда я пытаюсь изменить модель, это не работает. Я попытался удалить эту строку: 

(click)="$event.stopPropagation(); $event.preventDefault()"

, но таким образом компонент детализации закрывается, когда я щелкаю где-то внутри него. Во всяком случае, это тоже не работает. Есть ли другой способ сделать это?

1 Ответ

1 голос
/ 07 февраля 2020

Удалить $event.preventDefault() из вашего click обработчика внутри app-details. 

<app-details (click)="$event.stopPropagation()" *ngIf="item.expanded" [item]="item">
</app-details>

Метод protectDefault () интерфейса события сообщает агенту пользователя, что если событие не обрабатывается явно, его действие по умолчанию не должно выполняться, как обычно.

...