创建多个未知数量的异步管道

Question

我正在使用Angular 5并使用NGRX库的选择器加载一个项目列表。我的选择器返回一个项目列表，我使用异步管道在页面上动态创建标签。现在，当用户点击一个标签时，我想启动另一个选择器去从我的NGRX存储中获取数据，它可能存在，也可能不存在，广告可能会在效果中触发一个API请求，并由reducer更新。所有这些都能正常工作。

我的问题是，我有一个可变数量的标签，这可能会触发多个异步请求，我想将这些请求的响应绑定到正确的标签上。我不知道该怎么做？我的代码是这样的。

this.store$ .select(getTabContent(id)).pipe(takeUntil(this.onDestroy$), take(1)).subscribe((data) => { ...};

但更想使用异步管道，我不知道这是否是使用反应库的最佳方式。在我的情况下，我如何创建可变的异步管道并能够绑定到特定的标签？

Answer 1

你需要在某个地方共享标签的id，然后你可以使用switchMap和combelLatest来获得所有标签的通知。

ids$ = new BehaviorSubject([1, 2, 3]); // initial tabs

ngOnInit() {
  this.tabs$ = ids$.pipe(
    // creates an array of selectors
    switchMap(ids => combineLatest(ids.map(id => this.store.select(getTabContent(id))))),
    takeUntil(this.onDestroy$),
  );
}

addTab() {
  this.ids$.next([...this.ids$.value, 4]);
}

并在模板中

<ng-container *ngIf="tabs$ | async as tabs">
  <tab *ngFor="let tab of tabs">{{ tab | json }}</tab>
</ng-container>
<a (click)="addTab()">Add Tab</a>