Question

首先，对于角度开发和Web开发来说，我还是很新的。此外，我的英语很烂，但我会尽力清楚地表达自己。

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

textfilter行是一个简单的输入字段，它侦听keyup事件，该事件将触发以下功能：

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

这很好。现在，我想让用户有机会按一下旁边的“清除”按钮来清除输入字段。我不知道如何通过打字稿访问输入字段并将其值更改为“”。

是否可以在此处使用ViewChild和Element Ref？

可能是一个很愚蠢的问题，但请先感谢。

Answer 1

为什么要在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 {}

请记住，ngModel是FormsModule的一部分。这就是为什么必须将FormsModule导入到app.module.ts的原因。

Answer 2

这是我如何解决的。这样干净吗？我不觉得这是^^

#filterField-添加到模板中

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

单击“清除”按钮实现了此功能：

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

有机会清除使用按钮单击按钮上的过滤器输入字段

2 个答案: