带后缀触发的 angular matSelect 点击清除

Question

我正在尝试在我的输入右侧添加一个简单的图标以清除他的内容。

我不想在我的列表中添加“无”选项。

我想添加一个“清除”按钮。

实际上，一切正常，但是当我单击清除按钮时，选择正在显示...

这是一个测试代码：https : //stackblitz.com/edit/angular-mpbl8q

<mat-form-field>
  <mat-label>State</mat-label>
  <mat-select [(ngModel)]="currentState" name="State">
    <mat-option *ngFor="let state of states" [value]="state">{{state}}</mat-option>
  </mat-select>
  <div matSuffix>
    <mat-icon (click)="currentState = null">clear</mat-icon>
  </div>
</mat-form-field>

点击 clear 正在打开 mat-select

Answer 1

您必须在单击操作中添加 $event.stopPropagation()。

示例：https : //stackblitz.com/edit/angular-nmbxgn