Событие углового щелчка не срабатывает

Question

У меня есть фрагмент кода, сгенерированный внутри * ngFor, и диапазон с событием (click), который я не могу понять, почему он не срабатывает, когда я щелкаю по нему.В консоли ничего не печатается.

Может ли это быть из-за 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

Хорошо, так что после некоторой дополнительной проверки кода кажется, что проблема была из-за того, что шрифт был потрясающим, он просто прокомментировал span и вставил svg во время выполнения, поэтому указатель (click) больше не был доступен.Решение состояло в том, чтобы обернуть промежуток в div и поместить событие щелчка на div следующим образом:

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

Answer 2

Вы должны проверить на length, потому что * ngIf работает на булевых значениях, not просто array.

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