如何观察"searchTerm"输入字段的值变化? [英] How to have the `searchTerm` input field being observed for its value change?

问题描述

我有两个可以正常工作的观察值:

I have two observables that work fine:

@ViewChild(MatPaginator) paginator: MatPaginator;
@ViewChild(MatSort) sort: MatSort;

ngOnInit() {
  ...
  merge(this.sort.sortChange, this.paginator.page)
  .pipe(
    startWith({}),
    switchMap(() => {
      return this.getUsers(this.sort.active, this.sort.direction, this.paginator.pageIndex);
    }),
    map(userApi => {

这允许在更新排序或分页时调用getUsers服务方法.

This allows for the getUsers service method to be called when the sorting or the pagination is updated.

现在，我还希望在键入搜索词时调用此服务方法:

Now, I'd like to also have this service method being called when a search term is typed in:

@ViewChild(String) searchTerm: string;
@ViewChild(MatPaginator) paginator: MatPaginator;
@ViewChild(MatSort) sort: MatSort;

ngOnInit() {
  ...
  merge(this.searchTerm.length, this.sort.sortChange, this.paginator.page)
  .pipe(
    startWith({}),
    switchMap(() => {
      return this.getUsers(this.searchTerm, this.sort.active, this.sort.direction, this.paginator.pageIndex);
    }),
    map(userApi => {

具有以下模板标记:

<mat-form-field>
    <input matInput #searchTerm (keyup)="search($event.target.value)" placeholder="User name" autocomplete="off">
</mat-form-field>

但是，即使在页面加载时也不会调用service方法.

But the service method is then never called, not even at page load time.

我的想法是让searchTerm为可观察的，并由merge方法观察该可观察的事物.这样，我只有一个方法调用getUsers服务方法.

My idea is to have the searchTerm an observable, and have this observable being observed by the merge method. This way I only have one method call to the getUsers service method.

我也尝试了此语句(不使用.length)，但没有任何改变:

I also tried this statement (without the .length) but it did not change anything:

merge(this.searchTerm, this.sort.sortChange, this.paginator.page)

更新:我现在正在尝试以下方法:

UPDATE: I'm now trying something along this line:

@ViewChild('searchTerm') searchTerm: ElementRef;

merge(this.searchTerm.nativeElement.changes, this.sort.sortChange, this.paginator.page)

search事件处理程序确实会更新searchTerm成员变量:

The search event handler does update fine the searchTerm member variable:

  search(searchTerm: string) {
    this.searchTerm.nativeElement.value = searchTerm.trim().toLowerCase();

    if (this.paginator) {
      this.paginator.firstPage();
    }
  }

我想我可以获取输入字段元素的值来调用服务方法:

I suppose I can get the value of the input field element to call the service method:

return this.getUsers(this.searchTerm.nativeElement.value, this.sort.active, this.sort.direction, this.paginator.pageIndex);

但是如果merge包含this.searchTerm.nativeElement.changes，则不会触发:

But the merge is not fireing if it includes the this.searchTerm.nativeElement.changes as in:

merge(this.searchTerm.nativeElement.changes, this.sort.sortChange, this.paginator.page)

如何观察searchTerm输入字段的值变化?

How to have the searchTerm input field being observed for its value change ?

推荐答案

我终于可以使用EventEmitter对象解决问题了:

I finally could solve the issue, using an EventEmitter object:

@Input() searchTerm: string;
@Output() searchTermEvent = new EventEmitter<{ value: string }>();

merge(this.searchTermEvent, this.sort.sortChange, this.paginator.page)
  .pipe(
    startWith({}),
    switchMap(() => {
      this.isLoadingResults = true;
      return this.getUsers(this.searchTerm, this.sort.active, this.sort.direction, this.paginator.pageIndex);
    }),

该事件与处理程序一起发出:

The event is emitted with the handler:

search(searchTerm: string) {
  this.searchTerm = searchTerm;
  this.searchTermEvent.emit({
    value: this.searchTerm
  });

  if (this.paginator) {
    this.paginator.firstPage();
  }
}

在每个输入字符上启动getUsers服务方法.

The getUsers service method is fired up on each input character.

也许有更好的选择，但这暂时可行.

Maybe there is a better alternative, but this works fine for now.

这篇关于如何观察"searchTerm"输入字段的值变化?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！