在 mat-select 中添加“删除”按钮

Question

你好 Stackoverflow 社区，

当将鼠标悬停在选项本身上时，我尝试在给定垫选择的每个垫选​​项旁边添加一个“删除”按钮。悬停部分工作得很好。但是，考虑到我实现此按钮的方式，选择选项后显示的数据会发生变化：

由此 ：

对此：

这是所使用的代码片段：

HTML 模板：

<mat-form-field appearance="outline">
  <mat-select>
    <mat-option *ngFor="let year of data" [value]="year">

      <div style="display:flex; justify-content: space-between">
        <span>{{year}}</span>
        <span></span>
        <span class="deleteYear" (click)="openDeleteDialog(year)">
          <i class="material-icons-outlined">clear</i>
        </span>
      </div>

    </mat-option>
  </mat-select>
</mat-form-field>

我相信typescript组件中没有相关代码可以分享。但是，如果需要，我非常愿意提供源代码。

2 个问题：

1. 如何删除附加到所需“年份”字符串的“清除”（“X”图标的名称）文本？
2. 现在，当我单击“X”按钮时，功能就可以正常启动。但是，它也会在 mat-select 中选择该选项，因为通过单击“X”我也会单击该行。有什么方法可以让函数触发，但使表单不相信我选择了该行？

感谢大家的支持，

Answer 1

您是否尝试过使用而不是使用“i”标签作为图标

<mat-icon>clear</mat-icon>