ngFor中的点击事件不起作用Angular 7答案

【问题标题】：click event inside ngFor does Not work Angular 7ngFor中的点击事件不起作用Angular 7
【发布时间】：2019-10-04 01:47:09
【问题描述】：

我有以下代码：

<div class="custom-control custom-checkbox" *ngFor="let airline of airlines">
                      <input type="checkbox" (click)="airLineFilter($event)" value="{{airline}}" name="{{airline}}" class="custom-control-input">
                      <label class="custom-control-label" for="{{airline}}">{{airline}}</label>
                    </div>

当没有*ngFor (click) 事件像这样正常工作时：

<div class="custom-control custom-checkbox">
                  <input type="checkbox" id="americanAir" (click)="airLineFilter($event)" value="American Airlines" name="airlines" class="custom-control-input">
                  <label class="custom-control-label" for="americanAir">American Airlines</label>
                </div>

但是在使用*ngFor 之后点击事件没有被触发。有什么办法可以解决这个问题吗？

【问题讨论】：

我运行你的代码，它为我工作。
能否请您说出您所面临的确切问题，如果有错误请附上截图？
不，没有错误。检查元素后，我发现由于某种原因Label 与复选框重叠，这在 UI 上不可见。
可能是样式问题，请检查您使用的样式类
我也有类似的问题 :(

标签： angular7 angular-reactive-forms ngfor

【解决方案1】：

经过许多选择后，我终于找到了解决方案。这是由于复选框的 Id 属性和标签的 for 属性。

当我将代码更改为这样的代码时，它起作用了：

<div class="custom-control custom-checkbox" *ngFor="let airline of airlines;let i = $index;">
                  <input type="checkbox" id="airline{{i}}" (click)="airLineFilter($event)" value="{{airline}}" name="{{airline}}" class="custom-control-input">
                  <label class="custom-control-label" for="airline{{i}}">{{airline}}</label>
                </div>

【讨论】：