html - 每个选项的角度选择按钮奇怪的行为

Question

我对我的选择有疑问。我有几个选项可以删除它们。我的选项旁边的删除按钮非常有效，删除的行为也是如此。

但是当我单击一个项目时，我选择的选项旁边会出现文本“删除”。

当我单击我的选项之一时的结果：

<mat-form-field class="game-full-width" *ngIf="lotteryChoices$ | async; let options">
    <mat-select placeholder="Speelpot Type" formControlName="choiceType">
      <mat-option (click)="createLotteryChoice()">
        <i class="material-icons icon-add"> add </i> Nieuw Speelpot Type...
      </mat-option>
      <mat-option
        *ngFor="let option of options"
        [(value)]="option.choiceType"
        (click)="setChoiceType(option.choiceType, option.id)"
      >
        {{ option.choiceType }}
        <span class="delete-choice"
          ><button
            mat-flat-button
            matTooltip="Verwijder Speelpot Type"
            class="btn-delete"
            (click)="deleteChoiceType(option)"
          >
            <i class="material-icons icon-delete"> delete </i>
          </button></span
        >
      </mat-option>
    </mat-select>
  </mat-form-field>

如何在不更改选项的情况下删除选项旁边的文本删除？

PS：我知道有些文字是荷兰语，但那是因为它是给比利时的客户的。

标签： htmlangulartypescriptangular-materialhtml-select

Answer 1

通过使用解决了我的问题<mat-form-field>

也感谢 anncb 发布类似主题的链接