时间戳

首页 > 解决方案 > 如何从 Angular 中的 NgFor 循环中删除重复记录

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

问题描述

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

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

在此处输入图像描述

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

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

编辑：使用 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;
}

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 中做些什么吗？我有点难为我的下一步是什么？

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

标签： javascriptarraysangularngfor

解决方案

编辑：在此处查看 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 标记中。

推荐阅读