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

Question

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

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

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

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

已编辑:使用 Moxxi 的解决方案并向组件添加一些返回值， View 现在绑定(bind)了一些东西 - 这是“假”，但它正在绑定(bind)一些东西:

analytics.service.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;
}

click-cards.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 中做些什么吗？我对下一步是什么感到有点困惑？

有没有人遇到过这个问题？

Answer 1

在 Custom Pipe 下面创建。这里我设置了 'name' 列用于重复记录，你可以设置你自己的列来删除重复。

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>

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