单击材料图标时未触发“（单击）”事件

Question

我创建了一个<a>标记，该标记也随(click)事件函数调用一起提供。

单击适用于所有位置，甚至适用于所有子元素，但以下箭头mat-icons除外（有关完整视图，请参见下面的代码）：

<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

该问题似乎与在mat-icon标记内使用*ngIf有关。 如果是有角度的材料错误或想要的东西，请使用IDK。

顺便说一句， 在父ng-container上移动mat-icon标记的*ngIf问题解决了。

我的最终工作代码：

  <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>