rxjs angular 2：具有多個詞的搜索過濾器

Question

我正在嘗試使用多個術語實施搜索。 我想要實現的 N 圖表流程

我讀了這個博客： https : //netbasal.com/manage-your-filters-like-a-pro-in-angular-with-combinelatest-e7b0204be2df類似的情況。 但我不明白如何使用動態可觀察對象（搜索字詞輸入）來實現它。 假設我有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;
});