GroupBy‘rxjs/操作符’以角6中的键值和值数组排列

Question

我有一个问题，我从web得到一个数组作为响应。

反应的结构很简单：

interface CabinInfo {
    id: number;

    projectId: number;
    cabinId: number;
    ipAddress: string;
    port: number;
}

因此，现在我需要按照projectId对其进行分组，因此自然地，我会使用rxjs/操作符来获得某种类型的d数组，我可以在html中迭代，所以我使用：

        this.clientService.GetAllApplications()
            .subscribe(result => {
                const projectsObservable: Observable<CabinInfo> = from(result);
                const projectsList = projectsObservable.pipe(groupBy(cabin => cabin.projectId, cabin => cabin)
                    , mergeMap(group => group.pipe(map(() => ({ projectId: group.key, cabins: group.pipe(toArray())})))));

            }, error => { console.error(error); });

但是它不能像我想的那样起作用，我希望

Array<number|CabinInfo[]> 

我只得到了一些复杂的东西，比如

Observable<{projectId: number, Observable<CabinInfo>[]}> 

有没有办法把它转换成简单的数组？？

Answer 1

so naturally i would use rxjs/operators

你生活在一个奇怪的本性里我的朋友..。

使用Array.prototype.reduce函数：

.subscribe(result => {
  this.groupedResults = result.reduce((p, n) => {
    if (!p[n.projectId]) { p[n.projectId] = []; }
    p[n.projectId].push(n);
    return p;
  }, {});
});

Answer 2

由于您使用的是角，所以您可以在html中使用异步管道，所以您不需要订阅可观察到的内容，但是可以让角处理逻辑。相反，你可以进入你的可观察的操作符。

this.$applications = this.clientService.GetAllApplications()
        .pipe(
            groupBy(cabin => cabin.id),
            mergeMap(group => group.pipe(toArray()))
        );

在您的html中，您将得到如下内容：

<div *ngFor="let c of $applications | async">

</div>