如何从 Angular 中的 NgFor 循环中删除重复记录

我正在尝试从 *ngfor 循环中删除重复记录，并仅保留该记录点击次数最多的记录。

目标是显示用户的点击 URL，但目前，当为同一 URL 创建新记录时，它会显示在列表中。见下图：

点击操作按预期进行，但一段时间后列表将变得难以辨认。我正在尝试展示例如产品：客场球衣，点击 URLhttps://blablabla https://blablabla广告点击次数：6，因为这是我需要显示的最新点击次数。显示具有旧广告点击数据的同一产品的记录需要隐藏或从数组中删除。目前存在具有相同产品名称、URL 和点击数据的记录，并且随着每次新的点击而增加。我可以指定记录创建的日期，但这似乎有点粗鲁和不精致。我宁愿只显示最新的记录。

我尝试创建一个过滤器，其中过滤器会从 get 请求中删除重复项，从而从响应中创建一个变量 this.commissions，但每种过滤器方法都不起作用并返回一系列空数组。

Edited:使用 Moxxi 的解决方案并向组件添加一些返回，视图现在绑定了一些东西 - 这是“假”，但它正在绑定一些东西：

分析服务.ts

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { environment } from 'src/app/environments/environments';
import { throwError } from 'rxjs';
import { catchError, retry } from 'rxjs/operators';
import { Article } from './article';

@Injectable({
  providedIn: 'root'
})
export class AnalyticsService {

  article_url = environment.api_url + 'text_image_templates/rows';
  commissions_url = environment.api_url + 'commissions/rows';

  constructor(private http: HttpClient) { }

  getAllArticles(){
    return this.http.get<{data: Article[]}>(this.article_url)
    .pipe(
      retry(1),
      catchError(this.handleError),
    );
  }

  getAllCommissionData(): Observable<Card[]>{
    return this.http.get<Card[]>(this.commissions_url)
    .pipe(
      retry(1),
      catchError(this.handleError),
    )
  }

  handleError(error) {
    let errorMessage = '';
    if (error.error) {
      errorMessage = error.error.message;
    } else {
      errorMessage = error;
    }
    return throwError(errorMessage);
  }
}

卡类

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

点击卡.component.ts

import { Component, OnInit } from '@angular/core';
import { Commission } from '../commission';
import { AnalyticsService } from '../analytics.service';
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';
import * as _ from 'lodash';
import { Card } from '../card';

@Component({
  selector: 'app-click-cards',
  templateUrl: './click-cards.component.html',
  styleUrls: ['./click-cards.component.scss']
})
export class ClickCardsComponent implements OnInit {

  commissions$: Observable<any>;

  constructor(private analyticsService: AnalyticsService) {}

  ngOnInit() {
    this.getCommissions();
  }

  getCommissions(){
    this.commissions$ = this.analyticsService.getAllCommissionData().pipe(
      map((commisions: Card[]) => _.uniqBy(commisions.sort((a, b) => b.clicks - a.clicks), commission => commission.page_url)),
      map((commissions: Card[]) => _.groupBy(commissions, commission => commission.page_type)),
    )
  }
}

click-cards.component.html

<ng-container *ngIf="commissions$ | async as commissions">
  <ng-container *ngFor="let type of ['home', 'article', 'products']">
    <h4>{{ type | titlecase }}</h4>
    <p *ngIf="!commissions[type]">No {{ type }} Commissions Logged Yet</p>
    <ul *ngFor="let card of commissions[type]">
      <app-click-card [card]="card"></app-click-card>
    </ul>
  </ng-container>
</ng-container>

click-card.component.html

<ng-container *ngIf="card">
  <li>
    <ul>
      <li><strong>Click Origin:</strong> {{ card.page_url }}</li>
      <li><strong>Click Through Url:</strong> {{ card.url }}</li>
      <li *ngIf="card.clicks"><strong>Ad Clicks:</strong> {{ card.clicks }}</li>
      <li *ngIf="!card.clicks">No Ad Clicks Yet</li>
    </ul>
  </li>
</ng-container>

这是否与我在循环中使用子组件有关？我需要在 child-component.ts 中做一些事情吗？我有点困惑我的下一步是什么？

以前有人遇到过这个问题吗？

在下面创建自定义管道。这里我为重复记录设置了“名称”列，您可以设置自己要删除重复的列。

import { Pipe, PipeTransform } from '@angular/core';
    import * as _ from 'lodash'; 

    @Pipe({
      name: 'unique',
      pure: false
    })

    export class UniquePipe implements PipeTransform {
        transform(value: any): any{
            if(value!== undefined && value!== null){
                return _.uniqBy(value, 'name');
            }
            return value;
        }
    }

并在您的 *ngFor 上申请。

<ng-container *ngFor="let card of commissions | unique">
    <ul>
      <ng-container *ngIf="card.page_type === 'products'">
        <app-click-card [card]="card"></app-click-card>
      </ng-container>
    </ul>
  </ng-container>

如果您有任何疑问，请告诉我。谢谢。