尝试使用 Lodash Angular 6 进行排序时出现错误

Question

我有一个数组需要删除重复记录，然后留下点击次数最多的记录

我需要这个组显示两条记录，一条点击 7 次，另一条点击 3 次。

我已经将一系列冗长的问题缩小到这几行代码（第一个 map 方法），如果这些代码到位，则会在 ngOnInit() 上将一个空对象发送回浏览器。

这是方法：

getCommissions(){
    this.commissions$ = this.analyticsService.getAllCommissionData().pipe(
      map((commissionData: {data: Commission[]}) => {<--problem code
        const commissions = commissionData.data;<--problem code
        return _.uniqBy(commissions.sort((a, b) => b.clicks - a.clicks), commission => commission.page_url);<--problem code
      }), 
      map((commissionData: {data: Commission[]}) => {
        const commissions = commissionData.data;
        return _.groupBy(commissions, commission => commission.page_type)
      }),
      catchError(err => {
        this.errorObject = err;
        console.log(this.errorObject);
        return throwError(err);
      })
    )
  }

也值得分享课程：

export class Commission {
    id: number;
    url: string;
    page_url: string;
    page_type: string;
    clicks: number;
}

和html：

<ng-container *ngIf="commissions$ | async as commissions; else loading">
  <ng-container *ngFor="let page_type of ['home', 'article','statistics', 'products']">
    <h4>{{ page_type | titlecase }}</h4>
    <p *ngIf="!commissions[page_type]">No {{ page_type }} Commissions Logged Yet</p>
    <ul *ngFor="let card of commissions[page_type]">
      <app-click-card [card]="card"></app-click-card>
    </ul>
  </ng-container>
</ng-container>
<ng-container *ngIf="errorObject"> 
  {{ errorObject }}
</ng-container>
<ng-template #loading>
    <h4>Loading ...</h4>
</ng-template>

我有一个stackblitz of an example。但我似乎无法弄清楚为什么第一个地图无法使用 lodash 正确运行 - 数据设置正确并且排序不会出现任何错误，但是排序时（我猜）结果是一个空对象.

有人有什么建议吗？

Answer 1

您的问题是您的第一张地图改变了数据的形状，而第二张地图不再接收类型为 { data: Commission[] } 的对象，它接收来自第一张地图的输出，该地图没有数据属性，它已经是一个佣金数组，所以

const commissions = commissionData.data;

未定义。

将您的第二张地图更改为

map((commissions: Commission[]) => {
  return _.groupBy(commissions, commission => commission.page_type);
}),