Angular Material列表内图标无法点击的问题排查与解决

问题原因 #

你的问题确实是由于.list-selected-objects元素设置了width: 100%，这个span会占据mat-list-item的全部宽度空间，直接覆盖在右侧的删除图标上方。由此导致两个问题：

• 点击图标时实际触发的是下方span的事件，图标自身的(click)无法响应
• hover时显示的是父元素mat-list-item的title，因为span遮挡了图标自身的title属性

解决方法 #

方法1：调整布局避免遮挡（推荐）

修改CSS，让mat-list-item使用flex布局，同时让span只占据剩余空间，不覆盖图标：

.diag-list-item {
  font-size: 0.75rem;
  height: auto;
  padding-bottom: 0.4rem;
  padding-top: 0.4rem;
  white-space: nowrap;
  display: flex; /* 启用flex布局 */
  align-items: center; /* 内容垂直居中 */
}

.list-selected-objects {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow-x: hidden;
  flex: 1; /* 替换width:100%，占据除图标外的剩余空间 */
  font-size: 1rem;
}

方法2：提升图标层级

如果不想改动布局结构，可通过设置z-index让图标显示在span上方：

.delete-diag-icon {
  font-size: 1.25rem;
  position: relative; /* 定位是z-index生效的前提 */
  z-index: 10; /* 确保图标层级高于span */
}

方法3：使用Angular Material官方组件规范

改用mat-icon组件配合内置布局逻辑，更贴合框架设计：

<mat-list-item
  role="listitem"
  *ngFor="let obj of objects"
  (dblclick)="removeObj(obj)"
  class="diag-list-item"
  [title]="obj.text"
>
  <span class="list-selected-objects">
    <ng-container *ngIf="obj.ps !== ''">
      {{ obj.ps }} : &nbsp;
    </ng-container>
    {{ obj.text }}
  </span>

  <mat-icon 
    class="delete-diag-icon"
    (click)="removeObj(obj)"
    title="Delete object"
  >close</mat-icon>
</mat-list-item>

对应的图标样式调整：

.delete-diag-icon {
  color: red;
  font-size: 1.25rem;
  cursor: pointer;
  margin-left: auto; /* 自动靠右对齐 */
}

内容的提问来源于stack exchange，提问作者Invader