添加“删除"垫子选择中的按钮 [英] Adding "delete" button in mat-select

问题描述

你好 Stackoverflow 社区，

当鼠标悬停在选项本身上时，我试图在给定 mat-select 的每个 mat-option 旁边添加一个删除"按钮.悬停部分工作得很好.然而，考虑到我实现这个按钮的方式，选择一个选项后显示的数据被改变了:

从此:

为此:

这是使用的代码片段:

HTML 模板:

<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" (点击)="openDeleteDialog(year)"><i class="material-icons-outlined">clear</i></span>

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

我相信打字稿组件中没有相关代码可以共享.但是，如果需要，我非常愿意提供源代码.

2 个问题:

1. 如何去除附加到所需年份"字符串的清除"(X"图标的名称)文本?
2. 现在，当我点击X"按钮时，这些功能会正常触发.但是，它还通过单击X"在 mat-select 中选择该选项，我也单击该行.有什么办法可以让函数触发但让表单不相信我选择了行?

感谢大家的支持，

解决方案

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

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

你的函数删除(*)

 value=new FormControl()删除(事件:任何，年份:任何){event.preventDefault();//<--防止默认event.stopPropagation();//停止传播this.data=this.data.filter(x=>x!=year)//<--从数据中移除元素如果(this.value.value==year)this.value.setValue(null)//<--如果值为移除数据，则设置为null}

stackblitz

(*) 我用了一个formControl，如果你有一个formGroup 把this.value 改成

this.form.get(value)

Hello Stackoverflow community,

I am trying to add a "Delete" button next to each mat-option of a given mat-select when hovering over the option itself. The hover portion works just fine. However, given the way I implemented this button, the data displayed after selecting an option is altered :

From this :

To this :

Here is a snippet of the code used :

HTML template :

<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>

I believe there is no relevant code in the typescript component to share. However, I'm more than willing to provide the source code if needed.

2 Questions :

1. How can I get rid of the "clear" (name of the "X" icon) text appended to the desired "year" string?
2. Right now, when I click the "X" button, the functions fires just fine. However, it also selects that option in the mat-select as by clicking on the "X" I also click on the row. Is there any way I can have the function fire but make the form not to believe that I selected the row?

Thanks to all for your support,

解决方案

You can use mat-select-tigger So, your .html becomes like

<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>

And your function delete (*)

  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

  }

the stackblitz

(*) I use a formControl, if you has a formGroup change this.value by

this.form.get(value)

这篇关于添加“删除"垫子选择中的按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！