如何使用可觀察過濾可觀察對象

-1

我有一個組件，用於顯示來自可觀察對象的控制面板列表。現在用戶需要能夠在這個列表中進行搜索，但由於體積小，我更喜歡做這個客戶端。如何使用可觀察過濾可觀察對象

爲了得到這個工作，我添加了三個觀測到組件

@Input() dashboards: Observable<Dashboard[]>; // dashboards 

term = new Subject<string>(); // search term 
results: Observable<Dashboard[]>; // actual dashboard to display

要設置觀察到的結果我用下面的代碼。

ngOnInit(): void { 
    this.results = this 
     .term 
     .distinctUntilChanged() 
     .share() 
     .switchMap(term => { 
      return this.getDashboards(term); 
     }) 
     .share(); 
} 

private getDashboards(term) { 
    return this.dashboards 
     .map((dashboards: Dashboard[]) => { 
      return dashboards.filter(
       this.getFilter(term) 
      ); 
     }); 
} 

private getFilter(term) { 
    term = term.toLowerCase(); 
    return (dashboard: Dashboard) => { 
     // filter logic 
    }; 
}

在模板中，我有以下

<input 
    [disabled]="(dashboards | async)?.length < 1" 
    (keyup)="term.next($event.target.value)" 
    type="search" 
> 
<ul> 
    <li *ngFor="let dashboard of (results | async)"> 
     {{dashboard.name}} 
    </li> 
</ul>

在負載沒有顯示，但輸入列表時，將顯示，實際上被過濾。

所以我的問題是，這是要走還是走這條路，第二，如果這是正確的方式，我怎麼能確保在加載數據顯示？

來源

2017-10-05 MKroeders

爲了確保數據顯示，你應該將數據打印到控制檯。 –

你是什麼意思？我對儀表板和結果有一個簡單的轉儲，並且在結果爲空時儀表板顯示數據的初始狀態。直到我開始輸入結果開始有信息 – MKroeders

因此，在我做了一些其他可觀察的事情之後，我學到了一些可觀察的新事物。

首先，我用默認的空字符串將該術語更改爲BehaviorSubject。這意味着總會有一個事件發出並可用。

term = new BehaviorSubject<string>(''); // search term

接下來是使用combineLatest。那個可以用來使用第二個可觀察對象。得到results的代碼隨後變成如下所示;

this.results = this 
     .dashboards 
     .combineLatest(
      this.term 
     ) 
     .map((data) => { 
      return data[0].filter(this.getFilter(
       data[1] 
      )); 
     }) 
     .share();

的getDashboards方法可以被丟棄

來源

2017-10-11 12:58:29 MKroeders

如何使用可觀察過濾可觀察對象

回答

相關問題