在角度应用程序中的单击事件后，当父 div 设置为隐藏时，列表项单击事件未触发答案

【问题标题】：list item click event not firing when parent div set to hidden after click event in anglar application在角度应用程序中的单击事件后，当父 div 设置为隐藏时，列表项单击事件未触发
【发布时间】：2020-06-29 12:11:22
【问题描述】：

我正在做一个 Angular 项目：Angular 8.2.12 Angular-Cli: 8.3.14

如果在单击事件之后将其父 div 设置为隐藏，则以下简单的可单击 ul 列表不会触发其单击事件（即 div 将首先将项目显示为可见列表，然后在用户单击一个项目，它会将div 设置为隐藏）：

<div [hidden]="!visiblecond">
  <ul class="list-group">
    <li class="list-group-item" *ngFor="let itm of items"
        (click)="onClick($event)">
        {{ itm.name }}
    </li>
  </ul>
</div>

在组件中：

onClick($event) {
  console.log("clicked");
}

(click) 事件未触发。但是，如果我摆脱包含 div 上的 [hidden] 属性绑定（即项目列表始终可见），它将触发点击事件！

【问题讨论】：

你能告诉我们你设置visiblecond的代码吗？

标签： angular events

【解决方案1】：

div 的 visiblecond 由文本输入字段的焦点 (true) 和模糊 (false) 事件设置，因此，每当我单击以选择项目列表中的项目时，它都在文本之外输入字段，显然，文本字段的模糊事件“掩盖”了项目的点击事件，导致它不会触发。所以我只是摆脱了模糊事件，并且项目的点击事件正在触发

【讨论】：