Angular + rxjs：集合过滤模式，其中过滤器和集合是流

Question

有没有更好的方法来写这个。我想加载一些数据，订阅在下拉列表中加载的行为主题，每次更改我想过滤数据。它可以工作，但不确定这是通过嵌套 BehaviorSubject 编写它的最佳方式，还是我应该订阅从 http 加载数据的 forkJoin 的完成事件

ngOnInit() {

//load all the data

let array1: Observable<any[]> = this.service1.getAll();

let array2: Observable<any[]> = this.service2.getAll();    

let observableBatch = [array1, array2];


Observable.forkJoin(observableBatch).subscribe(data => {

  this.items1 = data[0] as Array<any>;

  this.items2 = data[1] as Array<any>   


  //subscribe to BehaviorSubject Observable, filter on every change        
  this.someService.selectedItem$.subscribe((item: any) => {

    if (item) {         

      this.filterItemsByItemId(item.itemId);
    }

   }, (error:any)=>{

  //error

});     


}, (error: any) => {

  //error


});

}

Answer 1

你有一个嵌套订阅的事实真的很奇怪。 通常我使用以下方法（假设您只加载一次所有数据）：

@Component({
 changeDetection: ChangeDetectionStrategy.OnPush
})
export class FooComponent {
  dataOne$: Observable<any[]>; // depending on if you use the unfiltered collections or not this members can be removed
  dataTwo$: Observable<any[]>;

  selected$: Observable<any>;    
  filteredOne$: Observable<any[]>;
  filteredTwo$: Observable<any[]>;

  constructor(){
   this.dataOne$ = this.service1.getAll()
     .share(); // avoid multiple requests for this data
   this.dataTwo$ = this.service2.getAll()
     .share(); // avoid multiple requests for this data

   this.selected$ = this.someService.selected$; // this should be an exposed observable, not the Subject itself

   filteredOne$ = this.selected$
    .withLatestFrom(this.dataOne$,(selected,elements)=>({selected,elements}))
    .map(data => elements.filter(element => //add filter logic using data.selected));
   filteredTwo$ = this.selected$
    .withLatestFrom(this.dataTwo$,(selected,elements)=>({selected,elements})
    .map(data => elements.filter(element => // add filter logic using data.selected));    
  }
}

}

我用这个存档的：

• 推送更改检测
• 主要使用async 管道从可观察对象中提取数据

通过这种方法，您可以使用模板中的selected$ 流来呈现当前值，并使用filtered$ 流来呈现相应集合的过滤元素。

如果数据集合可以发出新值，那么我通常使用 static combineLatest 运算符而不是 withLatestFrom。两者的区别在here解释。

相信我：无论您调用订阅，您的代码都可以重构为（ab）使用async管道：D

Answer 2

我没有看到你的数据加载有问题，困扰我的是behaviorSubject。当您在 Angular 中有输入绑定时，为什么要这样做？

我猜你的下拉列表是<select>。这给了

<select #myDropdown (change)="changeValue(myDropdown.value)">
  <option value="0">0</option>
</select>

在你的组件中：

changeValue(value) {
  // Let's say you request an endpoint
  this.myService.myMethod(value).subscribe(data => /* do your thing here */);

  // Want to filter your data ? No problem 
  this.items1 = this.items1.filter(item => item['your property here'] === value);
  this.items2 = this.items2.filter(item => item['your property here'] === value);
}

这似乎更容易和更短，不是吗？