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

【问题标题】：Adding "delete" button in mat-select在 mat-select 中添加“删除”按钮
【发布时间】：2020-03-21 07:35:33
【问题描述】：

你好 Stackoverflow 社区，

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

从此：

至此：

这是所用代码的sn-p：

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”按钮时，函数会正常触发。但是，它也会在 mat-select 中选择该选项，因为通过单击“X”我也单击了该行。有什么方法可以让函数触发但让表单不相信我选择了行？

感谢大家的支持，

【问题讨论】：

标签： angular angular-material

【解决方案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)

【讨论】：

进行了一些微调，但让我走上了正轨。我相信<mat-select-trigger> 中<span> 标记中的所有内容都不是必需的。这就是选择所需选项后实际显示的“X”。如果您同意，请编辑答案，以便我可以将其标记为将来遇到此问题的用户所接受的答案。非常感谢。

【解决方案2】：

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

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

【讨论】：

感谢您的回复。我确实尝试过使用 MatIcon 模块，但结果是一样的。谢谢

【解决方案3】：

它适用于mat-select-trigger

<mat-form-field appearance="outline">
      <mat-select [formControl]="value">
        <mat-select-trigger>
          {{value.value}}
        </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>

【讨论】：