Событие «(клик)» не вызывается при нажатии на иконку материала

Question

Я создал тег <a>, который также снабжен вызовом функции события (click).

Щелчок работает везде, даже для всех дочерних элементов, кроме следующих стрелок:значки (см. код ниже для полного просмотра):

<span *ngIf="section.pages.length>0">
    <mat-icon *ngIf="section.id==id_focus">keyboard_arrow_down</mat-icon>
    <mat-icon *ngIf="section.id!=id_focus">keyboard_arrow_right</mat-icon>
</span>

Что я делаю не так во всем этом?

МОЙ КОД:

      <a mat-list-item class="text-light listitem" (click)="switchSub(section.id)" (mouseenter)="expandSub(section.id)">

        <div class="row">
          <div class="col-xs-2">

          <!--CLICK NOT WORKING FROM HERE...-->
            <span *ngIf="section.pages.length>0">
              <mat-icon *ngIf="section.id==id_focus">keyboard_arrow_down</mat-icon>
              <mat-icon *ngIf="section.id!=id_focus">keyboard_arrow_right</mat-icon>
            </span>
          <!--...TO HERE-->

            <ng-container *ngIf="section.pages.length<=0">
              &nbsp;
            </ng-container>
          </div>
          <div class="col-xs-3">
            <span><mat-icon>{{section.icon}}</mat-icon></span>
          </div>
          <div class="col-xs-7">
            <span *ngIf="isExpanded"> &nbsp; {{section.name}} </span>
          </div>
        </div>
      </a>

ПРОСМОТР СТРАНИЦЫ

Где (click) - этоне работает на синем квадрате, который является значком материала, упомянутого выше.В другом месте это работает.
Синий квадрат правильно расположен внутри родительской рамки.

Answer 1

Кажется, проблема связана с использованием *ngIf внутри тега mat-icon.IDK, если это ошибка в угловом материале или что-то нужно.

Кстати, перемещение *ngIf тега mat-icon на отца ng-container решило проблему.

Мой окончательный рабочий код:

  <ng-container *ngFor="let section of myRoutes">
    <ng-container *ngIf="section.name!='null'">

      <a mat-list-item class="text-light listitem" (click)="switchSub(section.id)" (mouseenter)="expandSub(section.id)">

        <div class="row">
          <div class="col-xs-2">

          <!--ADDED ng-container AND REMOVED ngIf from the mat-icon tag-->
            <span *ngIf="section.pages.length>0">
            <ng-container *ngIf="section.id==id_focus">
              <mat-icon>keyboard_arrow_down</mat-icon>
            </ng-container>
            <ng-container *ngIf="section.id!=id_focus">
              <mat-icon>keyboard_arrow_right</mat-icon>
            </ng-container>
            </span>
          <!---------------------------------------------->

            <ng-container *ngIf="section.pages.length<=0">
              &nbsp;
            </ng-container>
          </div>
          <div class="col-xs-3">
            <span><mat-icon>{{section.icon}}</mat-icon></span>
          </div>
          <div class="col-xs-7">
            <span *ngIf="isExpanded"> &nbsp; {{section.name}} </span>
          </div>
        </div>
      </a>