*ngIf 面板内的复选框不会触发 angular

Question

似乎 *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>

循环一些项目。在这个循环中，还有另一个用于详细信息的组件。它仅在 item.expanded 为真时打开。里面有一些复选框

<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()"

但是通过这种方式，当我点击其中的某处时，详细信息组件将关闭。无论如何，它也不起作用。还有其他方法吗？

Answer 1

从 app-details 内的 click 处理程序中删除 $event.preventDefault()。

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

The Event interface's preventDefault() method tells the user agent that if the event does not get explicitly handled, its default action should not be taken as it normally would be.

*ngIf 面板内的复选框不会触发 angular

Checkbox inside *ngIf panel not trigger with angular

checkbox

typescript

angular-ng-if

ngmodel

angular