在角度材料中获取输入按键事件的值

Question

尝试按照Angular Material的示例创建一个带有清除按钮的输入，链接到该示例，我想要的是在按键输入事件上获取输入值。

HTML：

<mat-form-field>
  <input matInput (keydown.enter)="applyFilter($event)" placeholder="Search" 
   name="search" [(ngModel)]="searchValue">
  <button mat-icon-button matSuffix aria-label="Clear" (click)="clearSearch()">
    <mat-icon>close</mat-icon>
  </button>
</mat-form-field>

TS：

  applyFilter(event: any) {
      console.log(JSON.stringify(event)); 
  }

打印事件内容时控制台的结果：

{"isTrusted":true}

Answer 1

我不熟悉 Material Design 组件的这种特定场景，但评论中的建议是传统的做法。
MD 组件可能会因事件而中断，因此您可以尝试手动将值传递给函数。像这样：

<mat-form-field>
  <input matInput #txtVal (keydown.enter)="applyFilter(txtVal.value)" placeholder="Search" 
   name="search" [(ngModel)]="searchValue">
  <button mat-icon-button matSuffix aria-label="Clear" (click)="clearSearch()">
    <mat-icon>close</mat-icon>
  </button>
</mat-form-field>

TS：

applyFilter(val: string) {
 console.log(val); 
}

#txtVal 只是输入字段中的局部变量，因此我们手动将其值传递给函数。