如何使用可观察过滤可观察对象

-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

如何使用可观察过滤可观察对象

回答

相关问题