*ngIf 面板内的复选框不会以角度触发答案

【问题标题】：Checkbox inside *ngIf panel not trigger with angular*ngIf 面板内的复选框不会以角度触发
【发布时间】：2020-05-23 16:57:15
【问题描述】：

似乎 *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()"

但是通过这种方式，当我单击其中的某个位置时，详细信息组件将关闭。无论如何，它也不起作用。有没有其他方法可以做到这一点？

【问题讨论】：

标签： angular typescript checkbox angular-ng-if ngmodel

【解决方案1】：

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

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

Event 接口的preventDefault() 方法告诉用户代理如果事件没有得到显式处理，它的默认操作不应该像往常一样。

【讨论】：