使用 Angular 清除按钮点击时过滤器输入字段的机会

Question

首先，我对 angular 和一般的 Web 开发还很陌生。而且我的英语很烂，但我尽力表达清楚。

我遇到了以下情况：我的工具向用户显示一个 mat-table ，上面有一个 textfilter 行。

textfilter 行是一个简单的输入字段，用于侦听将触发以下函数的 keyup 事件：

applyFilter(filterValue: string) {
    this.dataSource.filter = filterValue.trim().toLowerCase();
  }

这很好用。现在我想让用户有机会通过按下 it.I 旁边的 "Clear" 按钮来清除输入字段不知道我如何访问输入字段并通过以下方式更改其值（到“”）打字稿。

这里可以使用ViewChild和Element Ref吗？

可能是一个非常愚蠢的问题，但在此先感谢。

Answer 1

好吧，这就是我解决它的方法。这条路干净吗？感觉不像^^

#filterField - 添加到模板中

@ViewChild('filterField', {static: false}) filterField: ElementRef; - 添加到组件。

为点击清除按钮实现了这个功能：

clearFilter(){
    this.filterField.nativeElement.value = "";
    this.applyFilter("");
  }

Answer 2

为什么在 angular2+ 中的输入字段上使用 keyup 事件侦听器？我会利用双向绑定的优势。真的很强大

看看我为你制作的沙盒：https://codesandbox.io/s/icy-breeze-zcrcy

app.component.html:

<div style="text-align:center">
  <input
    class="form-check-input"
    type="text"
    name="filterInput"
    [(ngModel)]="inputData"
  />
  <button (click)="clearInput()">CLEAR INPUT</button>

  <div>
    Here is my inputData: {{ inputData }}
  </div>
</div>

app.component.ts:

import { Component } from "@angular/core";

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent {
  public inputData: string = "";
  title = "CodeSandbox";

  clearInput() {
    this.inputData = "";
  }
}

并且不要忘记将 FormsModule 添加到您的 app.module.ts:

import { BrowserModule } from "@angular/platform-browser";
import { NgModule } from "@angular/core";
import { FormsModule } from "@angular/forms";

import { AppComponent } from "./app.component";

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, FormsModule],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {}

Please keep in mind, ngModel is part of the FormsModule. That is why you have to import the FormsModule to your app.module.ts.

使用 Angular 清除按钮点击时过滤器输入字段的机会

Opportunities to clear Filter Input Field On Button Click using Angular

angular

mat-table