rxjs angular 2:包含多个术语的搜索过滤器

Question

我正在尝试实现多个术语的搜索。N chart flow of want i tried to implement

我读到了这个博客：https://netbasal.com/manage-your-filters-like-a-pro-in-angular-with-combinelatest-e7b0204be2df it相似的案例。但我不明白如何使用动态观察值(搜索词输入)来实现它。假设我有30个搜索词的过滤器。简单的解决方案是使用combineLatest到所有的搜索词组件，但效率不高。我的目标是在第一次更改时订阅可观察对象。

我尝试对动态数组使用combineLatest运算符，但它不起作用：(。

我的代码：

​

import {Component, OnInit, Input, ViewChildren, QueryList, AfterViewInit} from '@angular/core';
import {Table} from "../../models/table";
import {InputFilterComponent} from "../types/input-filter/input-filter.component";
import {Observable} from "rxjs/Observable";

@Component({
  selector: '[phantom-thead-filter]',
  template: '<th>Actions</th>
  <th *ngFor="let col of cols" class="ng2-smart-th {{ col.title }}" [ngClass]="col?.class">
    <input-filter [col]="col" [table]="table"></input-filter>
  </th>
  ',
  styleUrls: ['./phantom-thead-filter.component.css']
})
export class PhantomTheadFilterComponent implements OnInit, AfterViewInit {
  @Input() cols;
  @Input() table: Table;
  @ViewChildren(InputFilterComponent) filters : QueryList<InputFilterComponent>;

  constructor() { }

  ngOnInit() {
  }

  ngAfterViewInit() {
    const filters = this.filters.map(f => f.getFilterWatcher());
    Observable.combineLatest(filters)
      .map(( filters : any[] ) => {
        filters.map((filter) => {
          return filter;
        });
      });
  }

}




import {Component, Input, OnInit} from '@angular/core';
import {FormControl} from "@angular/forms";
import {Table} from "../../../models/table";

@Component({
  selector: 'input-filter',
  template: '<input [formControl]="inputControl"
                    class="form-control"
                    type="text"
                    placeholder="input" />',
  styleUrls: ['./input-filter.component.css']
})
export class InputFilterComponent implements OnInit {
  inputControl = new FormControl();
  @Input() col;
  @Input() table: Table;
  changeFilter: any;
  constructor() { }

  ngOnInit() {
    this.changeFilter =this.inputControl.valueChanges
      .skip(1)
      .distinctUntilChanged()
      .debounceTime(400)
      .map((value: string) => {
        return value;
      }).startWith(null);
  }

  getFilterWatcher() {
    return this.changeFilter;
  }

  ngOnDestroy() {
    this.changeFilter.unsubscribe();
  }

}

​

Answer 1

CombineLatest等待所有可观测对象发出它们的第一个值。

如果即使没有设置所有过滤器也要查询，可以使用startWith提供一个虚拟的第一个null值。

const filters = this.filters.map(f => f.changeFilter.startWith(null));

Observable.combineLatest(...filters)
          .map(( filters : ActiveFilter[] ) => {
                // All filters are defined, but not all have values [null, 'search', null, null]
          });

Answer 2

您可以尝试使用此方法：

let listObs = [];
const searchTermA = Observable.fromEvent(this.searchInputARef.nativeElement, 'keyup').debounceTime(300).distinctUntilChanged();
listObs = [...listObs, searchTermA];

const searchTermB = Observable.fromEvent(this.searchInputBRef.nativeElement, 'keyup').debounceTime(300).distinctUntilChanged();
listObs = [...listObs, searchTermB];

Observable.combineLatest(list).subscribe(latestValues => {
    const [searchTermAValue, searchTermBValue] = latestValues;
});