Angular：按钮不产生点击事件答案

【问题标题】：Angular: Button does not produce click eventAngular：按钮不产生点击事件
【发布时间】：2021-11-27 14:05:17
【问题描述】：

我在 mat-tab-group 中有几个 mat-tab。创建第三个 mat-tab 后，我注意到嵌入在 mat-list-item 中的下载按钮 (button3) 不会产生单击事件。我在不同的地方添加了额外的按钮 1 和 2，它们都可以正常工作。

<mat-tab>
  <ng-template mat-tab-label>
      <mat-icon class="tab-icon">auto_awesome_motion</mat-icon>
      Transitions
  </ng-template>
  <button mat-button (click)="foobar()">button1</button>
  <mat-list style="max-width: 800px;">
      <button mat-button (click)="foobar()">button2</button>
      <mat-list-item *ngFor="let t of transitions; let i = index"
          [class.transition-list-even]="i % 2 === 0"
          [class.transition-list-odd]="i % 2 != 0">
          <mat-icon mat-list-icon>auto_awesome_motion</mat-icon>
          <div mat-line fxFlex="row" fxLayoutAlign="space-between center">
              <div fxLayout="column">
                  <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="5px">
                      <span>{{ t.from?.name }}</span>
                      <mat-icon>arrow_forward</mat-icon>
                      <span>{{ t.to?.name }}</span>
                  </div>
                  <span class="transition-sub">Transition</span>
              </div>
              <button mat-button (click)="foobar()">button3</button>
          </div>
      </mat-list-item>
  </mat-list>
</mat-tab>

单击不起作用的按钮（按钮 3）绝对没有任何反应。控制台中什么都没有，没有网络活动，什么都没有。我不知道如何进一步调试。有什么想法吗？

【问题讨论】：

标签： angular angular-material

【解决方案1】：

有一个 CSS 问题：您将一些元素重叠为 mat-icon 并跨越到按钮（使用检查元素可以找到问题）。我无法正确重现该问题，因为我没有 CSS 代码。我需要一个 stackblitz 来进行深入分析。

【讨论】：