角点击事件未触发

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');
  }

}

Answer 1

将位置更改为相对位置并给出一些z-idex，问题可能是因为某些迭代器类覆盖了您的跨度

Answer 2

您应该检查 length ，因为* ngIf适用于布尔值， not 只需 array

 <ng-container *ngIf="matches.length > 0">

Answer 3

好的，所以经过对代码的更多检查后，似乎问题是因为字体很棒，它只是评论了span并在运行时插入了一个svg，所以（click）指针不再可用了。解决方案是将span包装在div中并将click事件放在div上，如下所示：

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