如何添加按键事件Angular答案

【问题标题】：How can I add a keypress event Angular如何添加按键事件Angular
【发布时间】：2021-01-16 06:59:06
【问题描述】：

我正在为我正在定义的变量设置一个输入字段，这用于过滤我在前端的表格。除非在输入字段中输入键，否则它不希望返回任何值。如果输入字段不期望返回关键事件，如何使过滤器正常工作。我希望它在分配 'filteredValue' 时立即返回值。

HTML

<mat-form-field appearance="outline" *ngIf="filteredValue">
  <mat-label>Filter 1</mat-label>
  <input matInput 
         type="text" 
         (input)="doFilter($event.target.value)" 
         placeholder="Ex. BMW" 
         value="{{filteredValue | lowercase }}">
</mat-form-field>

组件.ts

ngOnInit() {
  if (this.urlMM) {
    this.filteredValue = this.urlMM + ' ' + this.urlMake + ' ' + this.urlYear;
  }
}

public doFilter = (value: string) => {
  this.dataSource.filter = value.trim().toLowerCase();
}

【问题讨论】：

所以您希望在输入字段中输入内容后立即获得您的值？如果是这样，您应该在此处查看用户“Saga”的答案stackoverflow.com/questions/35359358/…
我已经为输入字段赋值。但过滤器仅在我编辑文本框时返回值。我希望在页面加载后立即过滤这些值。

标签： html angular typescript filter angular-material

【解决方案1】：

您可以使用按键

doFilter(filterKety) {
console.log(filterKey)
if(filterKey.length > 2){
// your logic

} 
}

<mat-form-field appearance="outline" *ngIf="filteredValue">
  <mat-label>Filter 1</mat-label>
  <input matInput 
         type="text" 
         (keypress)="doFilter($event.target.value)" 
         placeholder="Ex. BMW" 
         value="{{filteredValue | lowercase }}">
</mat-form-field>

【讨论】：

这仍然不能提供所需的解决方案。当页面加载时，输入字段已经分配了一个值（“filteredValue”）。我希望在表中返回数据后立即过滤此值。