尝试使用 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>

我有一个例子的堆栈闪电战。但是我似乎无法弄清楚为什么第一张地图无法使用 lodash 正常运行 - 数据设置正确并且排序不会带来任何错误，但是排序时（我猜）结果是一个空对象.

有没有人有什么建议？

Answer 1

你的问题是你的第一个地图改变了数据的形状，第二个地图不再接收类型为 { data: Commission[] } 的对象，它接收来自第一个没有数据属性的地图的输出，它将已经是一个委员会的数组所以const commissions = commissionData.data;未定义。将您的第二张地图更改为map((commissions: Commission[]) => {&nbsp; return _.groupBy(commissions, commission => commission.page_type);}),