Добавление кнопки «удалить» в mat-select

Question

Hello Stackoverflow community,

Я пытаюсь добавить кнопку "Удалить" рядом с каждым mat-option данного mat-select при наведении курсора Сам вариант. Часть парения работает просто отлично. Однако, учитывая способ, которым я реализовал эту кнопку, данные, отображаемые после выбора опции, изменяются:

Из этого:

Для этого:

Ниже приведен фрагмент используемого кода:

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>

Я считаю, что в компоненте машинописного текста нет соответствующего кода для совместного использования. Тем не менее, я более чем готов предоставить исходный код, если это необходимо.

2 Вопросы:

1. Как мне избавиться от «чистого» (название значка «X»), текст, добавленный к желаемой строке «год»?
2. Прямо сейчас, когда я нажимаю кнопку «X», функции работают нормально. Тем не менее, он также выбирает эту опцию в коврике, так как, нажав на «X», я также нажимаю на строку. Можно ли как-нибудь запустить функцию, но заставить форму не верить, что я выбрал строку?

Спасибо всем за поддержку,

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>

И ваша функция 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

(*) Я использую formControl, если у вас есть formGroup, измените this.value на

this.form.get(value)

Answer 2

Вы пробовали использовать вместо значка "i" для значка

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