Angular 7 rxjs 6 привязывается только к определенным элементам - PullRequest
Новая
       17

Angular 7 rxjs 6 привязывается только к определенным элементам

1 голос
/ 31 мая 2019

Я создаю новое веб-приложение на Angular7.

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

Я думаю, что мне нужно связать событие keyup, чтобы обнаружить изменение значения. Я использую rxjs fromEvent, и это работает, однако, он обнаруживает keyup ЛЮБОГО события клавиатуры, а не только события, связанные с соответствующими полями ввода. Я хочу избежать ненужных событий, так как это будет вызывать фильтрацию на стороне сервера каждый раз.

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();

1 Ответ

1 голос
/ 01 июня 2019

Если вы хотите использовать 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, вы можете использоватьугловые встроенные привязки для привязки события ввода keyup: 

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

Я предпочитаю второй вариант.

...