Angular 带后缀触发器的角度选择点击清除

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

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

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

事实上，一切都很好，但当我点击清除按钮，选择显示

下面是一个测试代码：

陈述
{{state}}
清楚的

---

单击清除正在打开mat select

您必须在单击操作中添加$event.stopPropagation（）

例如：

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