Angular素材列表中的图标不可点击

Question

我有以下 Angular 材料清单

<mat-list
  role="list"
  class="diag-list"
>
  <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>

    <i
      class="fas fa-times delete-diag-icon"
      (click)="removeObj(obj)"
      style="color: red; float: right"
      title="Delete object"
    ></i>
  </mat-list-item>
</mat-list>

具有以下 CSS 类

.diag-list {
  max-height: 200px;
  overflow-y: auto;
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}
.list-selected-objects {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow-x: hidden;
  width: 100%;
  font-size: 1rem;
}

.diag-list-item {
  font-size: 0.75rem;
  height: auto;
  padding-bottom: 0.4rem;
  padding-top: 0.4rem;
  white-space: nowrap;
}

.diag-list-item:hover {
  background-color: lightgray;
}

.delete-diag-icon {
  font-size: 1.25rem;
}
.delete-diag-icon:hover {
  cursor: pointer;
}

我可以使用(dblclick)="removeObj(obj)删除 object 但不使用<i></i>中的点击侦听器。我认为span与图标重叠，因为没有显示图标Delete object的title但是当我在图标上输入 hover 时title obj.text 。所以，点击图标不起作用。我想问一下为什么以及我可以做什么来注册对该图标的点击？

Answer 1

你可以用这样的按钮替换 i 标签：

<mat-list-item le="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>

    <button class="delete-diag-icon" mat-icon-button (click)="removeObj(obj)" title="Delete object">
      <mat-icon>delete</mat-icon>
    </button>  <--- this replaced for i tag
</mat-list-item>

示例： https://stackblitz.com/edit/angular-lxjpyu

希望这有帮助！