有什么可行的方法可以在垫子表单字段（垫子前缀或垫子后缀）中为垫子图标编写点击事件吗？答案

【问题标题】：Is there any posible way to write click event for mat-icon inside mat form field (matprefix or matsuffix)?有什么可行的方法可以在垫子表单字段（垫子前缀或垫子后缀）中为垫子图标编写点击事件吗？
【发布时间】：2022-12-10 22:11:09
【问题描述】：

我有一个 mat-form-field，我在该 mat-form-field 中使用了一个自定义 mat-icon 作为 matprefix。现在我想为那个 matprefix 图标写一个点击方法。有没有可能？我尝试编写点击方法，但它不起作用

 <mat-form-field floatLabel="never" >         
      <mat-icon  (click)="clicking()"  matPrefix class="formula-icon" svgIcon="lo-formula"
      *ngIf="item[displayedColumn]?.formula != undefined && item[displayedColumn].lock == 'off'">
    </mat-icon>
     <input [value]=currentFocusValue
        autocomplete="off">
    </mat-form-field>

【问题讨论】：

标签： angular typescript angular-material mat-form-field

【解决方案1】：

您可以改用垫子图标按钮：

<mat-form-field>
  <input matInput type="text" value="test" #input>
  <button mat-button 
          *ngIf=item[displayedColumn]?.formula != undefined && item[displayedColumn].lock == 'off'"
          matPrefix
          mat-icon-button
          class="formula-icon" svgIcon="lo-formula"
          (click)="clicking($event,input)">
    <mat-icon>close</mat-icon>
  </button>
</mat-form-field>

clicking(evt: MouseEvent, input: HTMLInputElement) {
input.value = '';
  // avoids focusing the input after clicking on the close button
  evt.stopPropagation();
}

【讨论】：