Angular 7 rxjs 6 仅绑定到某些元素

Question

我正在使用 Angular7 构建一个新的 Web 应用程序。

我有一个数据 table，我想基于每列的搜索值构建服务器端搜索功能。我在数据 table 中每一列的顶部都有一个输入元素。每次任何输入框中的搜索值发生变化时，都应触发搜索过滤。

我想我需要绑定keyup事件来检测值的变化。我正在使用 rxjs fromEvent 并且它确实有效，但是，它检测到任何键盘事件的按键，而不仅仅是与相关输入框相关的事件。我想避免不必要的事件，因为这每次都会调用服务器端过滤。

HTML

<table mat-table [dataSource]="data" class="example-table" matSort>
  <!-- ItemID Column -->
  <ng-container matColumnDef="ItemID">
    <th class="header" mat-header-cell *matHeaderCellDef>
      <div mat-sort-header>ItemID</div>
      <mat-form-field class="filter" floatLabel="never">
        <input
          matInput
          placeholder="Search ItemID"
          #input
          [(ngModel)]="searchValues.ItemID"
        >
      </mat-form-field>
    </th>
    <td mat-cell *matCellDef="let row">{{row.ItemID}}</td>
  </ng-container>

  <!-- IdentificationID Column -->
  <ng-container matColumnDef="IdentificationID">
    <th class="header" mat-header-cell *matHeaderCellDef>
      <div mat-sort-header>IdentificationID</div>
      <mat-form-field class="filter" floatLabel="never">
        <input
          matInput
          placeholder="Search IdentificationID"
          #input
          [(ngModel)]="searchValues.IdentificationID"
        >
      </mat-form-field>
    </th>
    <td mat-cell *matCellDef="let row">{{row.IdentificationID}}</td>
  </ng-container>
</table>

TS 组件

// TODO: bind to relevant input elements only
fromEvent<KeyboardEvent>(document, 'keyup')
  .pipe(
    debounceTime(150),
    distinctUntilChanged(),
    tap(() => {

      // call search function

    })
  )
  .subscribe();

Answer 1

如果您想使用 fromEvent，您可以按标签名称过滤所有事件。在您的情况下，它将如下所示：

// TODO: bind to relevant input elements only
fromEvent<KeyboardEvent>(document, 'keyup')
  .pipe(
    filter(e => e.target && e.target.tagName === 'INPUT') // filters only observables from INPUT
    debounceTime(150),
    distinctUntilChanged(),
    tap(() => {

      // call search function

    })
  )
  .subscribe();

请注意我添加的filter()运算符

如果您不想使用 fromEvent，您可以使用 angular 内置绑定来绑定输入的 keyup 事件：

<input (keyup)="searchTable($event)">

我更喜欢第二种选择。

Angular 7 rxjs 6 仅绑定到某些元素

Angular 7 rxjs 6 bind to certain elements only

typescript

angular

rxjs6