angular - 在 mat-select 中添加 "delete"按钮

Question

你好 Stackoverflow 社区，

当鼠标悬停在选项本身上时，我试图在给定 mat-select 的每个 mat-option 旁边添加一个“删除”按钮。悬停部分工作得很好。但是，鉴于我实现此按钮的方式，选择选项后显示的数据已更改:

从这里:



对此:



这是使用的代码片段:

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个问题:

如何摆脱附加到所需“年份”字符串的“清除”(“X”图标的名称)文本？

现在，当我单击“X”按钮时，这些功能会很好地触发。但是，它还通过单击“X”在 mat-select 中选择该选项，我也单击该行。有什么办法可以让函数触发但让表单不相信我选择了行？

感谢大家的支持，

Answer 1

您可以使用 mat-select-tigger所以，你的 .html 变得像

<mat-form-field appearance="outline">
  <mat-select [formControl]="value">
    <mat-select-trigger>
      {{value.value}}
       <span class="deleteYear" (click)="delete($event,value.value)">
          <mat-icon>clear</mat-icon>
        </span>
    </mat-select-trigger>
    <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)="delete($event,year)">
          <mat-icon>clear</mat-icon>
        </span>
      </div>

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

你的函数删除(*)

  value=new FormControl()

  delete(event:any,year:any)
  {
    event.preventDefault(); //<--prevent default
    event.stopPropagation();  //stop propagation
    this.data=this.data.filter(x=>x!=year) //<--remove the element from data
    if (this.value.value==year)
        this.value.setValue(null) //<--if the value is the remove data, set null

  }

stackblitz

(*) 我使用一个 formControl，如果你有一个 formGroup 改变 this.value

this.form.get(value)