Question

根据Angular Material，link to the example中的示例，尝试使用清除按钮创建输入，我想要的是在key enter事件上获取输入值。

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

您只需要在 event.target.value 方法中使用 applyFilter() 来获取值。

applyFilter(event: any) {
  console.log(event.target.value); 
}

链接到StackBlitz Demo。

Answer 2

我不熟悉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只是输入字段中的局部变量，因此我们将其值手动传递给函数。

在角材料中输入keypress事件中获取价值

2 个答案: