3

使用 rxjs 的 Angular 已经显示第一个可观察对象的结果并在其他可观察对象完成时组合数据的最佳方法是什么？

例子：

@Component({
    selector: 'app-component',
    template: `
<div *ngFor="let group of groups$ | async">
    <div *ngFor="let thisItem of group.theseItems">
        ...
    </div>
    <div *ngFor="let thatItem of group.thoseItems">
        ...
    </div>
</div>
`
})
export class AppComponent implements OnInit {
    ...
    ngOnInit() {
        this.groups$ = this.http.get<IThisItem[]>('api/theseItems').pipe(
            map(theseItems => {
                return theseItems.groupBy('groupCode');
            })
        );

        // combine these results? This operation can take 5 seconds
        this.groups$$ = this.http.get<IThatItem[]>('api/thoseItems').pipe(
            map(thoseItems => {
                return thoseItems.groupBy('groupCode');
            })
        );
    }
}

我知道可以通过订阅两者来完成，然后合并结果。但是是否可以为此使用管道运算符并使用async管道？

4

3 回答 3

4

我认为您可以使用combineLatestrxjs 运算符。这可能意味着您也稍微更改了模板中的处理方式。

我无法使用您的示例，因为我不知道您的 get 函数，但基本上适用相同的原则。

在此处查看 stackblitz以获取示例：

export class AppComponent  {

  private firstObservable = of([{name: 'name1'}]).pipe(startWith([]));
  private secondObservable = of([{name: 'name2'}]).pipe(startWith([]));

  combined = combineLatest(this.firstObservable, this.secondObservable).pipe(
        map(([firstResult, secondResult]) => {
          return [].concat(firstResult).concat(secondResult)
        }) 
   );
}

html输出：

<span *ngFor="let item of combined | async">{{item.name}}<span>
于 2019-12-02T08:13:42.820 回答
2

您可以使用合并和扫描。

  first$: Observable<Post[]> = this.http.get<Post[]>('https://jsonplaceholder.typicode.com/posts?userId=1');
  second$: Observable<Post[]>  = this.http.get<Post[]>('https://jsonplaceholder.typicode.com/posts?userId=2');
  combinedPosts$: Observable<Post[]> = merge(this.first$, this.second$).pipe(
    scan((acc: Post[], curr: Post[]) => [...acc, ...curr], [])
  )

https://www.learnrxjs.io/operators/combination/merge.html 从许多中使一个可观察。

https://www.learnrxjs.io/operators/transformation/scan.html 扫描类似于array.reduce...可以累积每个可观察发射的结果。

工作示例： https ://stackblitz.com/edit/angular-lrwwxw

运算符不太理想，因为它要求每个 observable 在组合的combineLatestobservable 发出之前发出：https ://www.learnrxjs.io/operators/combination/combinelatest.html

请注意，在每个 observable 发出至少一个值之前， combineLatest 不会发出初始值。

于 2019-12-02T08:47:57.913 回答
1

异步管道只是 observable 的订阅者...要回答您的问题，您可以使用任何可能的方式...例如：

<div *ngFor="let group of groups$ | async as groups">
    <div *ngFor="let thisItem of group.theseItems">
        ...
    </div>
</div>

public groups$: Observable<type> = this.http.get<IThatItem[]>.pipe(
  startWith(INITIAL_VALUE)
);

或者

public groups$: Observable<type> = combineLatest(
  of(INITIAL_VALUE),
  this.http.get<IThatItem[]>
)
于 2019-12-02T08:32:55.687 回答