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

Question

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

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

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

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

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

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

编辑：在此处查看 Stackblitz：https://stackblitz.com/edit/angular-3kchji

不要做过滤管道，也不要在组件内订阅。 更好：存储 Observable，使用 rxjs 运算符删除重复项并使用异步管道。

模板中的异步管道

<ng-container *ngIf="commissions$ | async as commissions">
  <h4>Home</h4>
  <p *ngIf="!commissions['home']">No home Commissions Logged Yet</p>
  <ul *ngFor="let card of commissions['home']">
    <app-click-card [card]="card"></app-click-card>
  </ul>
  <h4>Articles</h4>
  <p *ngIf="!commissions['article']">No article Commissions Logged Yet</p>
  <ul *ngFor="let card of commissions['article']">
    <app-click-card [card]="card"></app-click-card>
  </ul>
  <h4>Products</h4>
  <p *ngIf="!commissions['products']">No product Commissions Logged Yet</p>
  <ul *ngFor="let card of commissions['products']">
    <app-click-card [card]="card"></app-click-card>
  </ul>
</ng-container>

还有你的组件

export class ClickCardsComponent implements OnInit {

  commissions$: Observable<any>;

  constructor(private analyticsService: AnalyticsService) { }

  ngOnInit() {
    this.getCommissions();
  }

  getCommissions(){
    this.commissions$ = this.analyticsService.getAllCommissionData().pipe(
      map((commissions: Commission[]) => {
        /* your logic to remove duplicates of the array */
      }),
      // below is extended answer
      map((commissions: Commission[]) => {
        _.groupBy(commissions, commission => commission.page_type)
      })
    )
  }
}

除此之外，您还可以将要显示的类型存储在一个数组中并循环它

<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>

完成此操作后，您可能还想保留 app-click-card 组件并将其直接添加到 ul 标记中。

Answer 2

@MoxxiManagarm 的回答是正确的，但是如果您不确定是否要实现 observables 或任何东西，请移除您的管道，并在订阅 click-cards.component.ts 中返回的数据时，通过 response.data.reduce 过滤您的响应数据。您将需要维护一个单独的列表，列出已经存在的任何 url，以消除重复项（实现您的重复检测逻辑）。如果您遇到更多问题，显示您正在接收的数据以及您希望数据的哪一部分是唯一的肯定会有所帮助，但不要分享您介意让人们访问的任何数据。如果可能，只共享数据的虚拟结构。

Answer 3

您可以从 ts 中的重复项中清除您的佣金数组，如下所示：

使用每个元素的主键 (id) 来允许重复抑制

  removeLabelDuplicates(array: any) {
  return arr.
  filter((item, your_commision_id, self) =>
    your_commision_id === self.findIndex((t) => (
      t.your_commision_id=== item.your_commision_id
    ))
  )

}

Answer 4

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

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>

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