Возможности очистки поля ввода фильтра при нажатии кнопки с использованием Angular

во-первых, я новичок в angular и веб-разработке в целом. Кроме того, мой английский отстой, но я изо всех сил стараюсь ясно выражаться.

Я получил следующий сценарий: мой инструмент представляет матовую таблицу пользователю, над которым находится строка текстового фильтра.

Строка текстового фильтра — это простое поле ввода, которое прослушивает событие keyup, которое запускает следующую функцию:

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

Это прекрасно работает. Теперь я хочу дать пользователю возможность очистить поле ввода, нажав кнопку «Очистить» рядом с ним. Я понятия не имею, как я могу получить доступ к полю ввода и изменить его значение (на «») через машинопись.

можно ли здесь использовать ViewChild и Element Ref?

Возможно, довольно глупый вопрос, но заранее спасибо.


angular mat-table
person DocBenchpress    schedule 13.12.2019    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Почему вы используете прослушиватель событий keyup в полях ввода в angular2+? Я бы воспользовался двусторонней привязкой. Это действительно мощно.

Взгляните на песочницу, которую я сделал для вас: 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.

person Rasidre    schedule 13.12.2019

arrow_upward
0
arrow_downward

Ну вот как я это решил. Этот путь чистый? Я не чувствую, что это ^^

#filterField - добавлено в шаблон

@ViewChild('filterField', {static: false}) filterField: ElementRef; - добавлен в компонент.

Реализована эта функция для нажатия кнопки «Очистить»:

clearFilter(){
    this.filterField.nativeElement.value = "";
    this.applyFilter("");
  }
person DocBenchpress    schedule 13.12.2019