Angular点击事件未触发

Question

我有一段代码是在*ngFor中生成的，还有一个绑定了(click)事件的span标签，但是当我点击它时，无法触发该事件，控制台也没有任何输出。

可能是因为ngFor或ngIf造成的吗？我已经尝试了我能想到的所有方法...

我的模板代码如下（与问题相关部分）：

<tbody>
  <ng-container *ngIf="matches">
    <tr *ngFor="let meci of matches">
      <td>{{ meci.id }}</td>
      <td>{{ meci.echipa1 }}</td>
      <td>{{ meci.echipa2 }}</td>
      <td>{{ meci.tip }}</td>
      <td>{{ meci.pretBilet }}</td>
      <td>{{ meci.nrLocuri }}</td>
      <td>{{ meci.data }}</td>
      <td class="ui center aligned">
        <span class="fas fa-trash red icon"></span>
        <span class="fas fa-edit teal icon" (click)="edit(meci)"></span>
      </td>
    </tr>
  </ng-container>
</tbody>

而这个组件是这样的:

export class MatchesComponent implements OnInit {
  matches: Meci[];

  constructor(private service: MatchesService, private modalService: SuiModalService) { }

  ngOnInit() {
    this.service.getAll().subscribe(matches => this.matches = matches);
  }

  edit(meci: Meci) {
    console.log('edit');
  }

}

- rares_dude

---

你试过了吗？ - Sajeetharan

Answer 1

好的，经过对代码的进一步检查，似乎问题是由于字体awesome导致的，它只是在运行时注释了span并插入了一个svg，所以(click)指针不再可用。解决方法是将span包装在一个div中，并将点击事件放置在div上，如下所示：

<div class="icon-wrapper" (click)="edit(meci)">
   <span class="fas fa-edit teal icon"></span>
</div>

- rares_dude

---

这并不是我的问题，但它迫使我更仔细地查看我的代码。我忘记在 HTML 中调用函数了。:) 坐以待毙。当开始感到疲劳时，休息一下并回来处理代码是有帮助的。感谢您的发帖。 - Sankofa

一样，这也不是我的问题，但（Click）是另一回事，而（click）则不同... 谢谢让我再次检查我的代码 ;) - Leroy Meijer

Answer 2

将位置更改为相对，并给一些 z-index，问题可能是因为其他类重叠了您的 span。

- Pran R.V