Angular 使用mat图标自动选择mat输入的内容

我有一个matInput字段和一个mat图标（编辑图标）。当我点击编辑图标时，我需要执行以下操作 操作

启用输入文本框

把焦点放在它上面

并自动选择其中的所有文本

已尝试“$event.target.select（）”。但它不起作用。 我该怎么做？ 提前谢谢

.html文件

<mat-form-field class="input-style">
 <input matInput[(ngModel)]="name"(click)="$event.target.select()">
  {{value}}
 </mat-form-field>
<button mat-icon-button color="primary">
 <mat-icon (click)="$event.target.select()">edit</mat-icon>
</button>

---

您可以使用

本地elementRef var

：

<mat-form-field class="input-style">
    <input matInput #inputRef [(ngModel)]="name">
    {{value}}
</mat-form-field>
<button mat-icon-button color="primary">
    <mat-icon (click)="inputRef.select()">edit</mat-icon>
</button>

{{value}}
编辑

你可以试试这个-->

<mat-form-field class="input-style">
    <input matInput #inputRef [(ngModel)]="name">
    {{value}}
</mat-form-field>
<button mat-icon-button color="primary">
    <mat-icon (click)="inputRef.select()">edit</mat-icon>
</button>