从视图中删除重复值 - Angular

Question

下面是我要过滤的重复字段，只显示一个而不是两个：

"release_dates":[ {"认证":"PG-13","iso_639_1":"","note":"Telluride Film Festival","release_date":"2018-08-31T00: 00:00.000Z","type":1},

{"认证":"PG-13","iso_639_1":"","note":"","release_date": "2018-09-28T00:00:00.000Z","type":2}]}]}

下面的组件显示上面的两条记录 json:

import { Component, OnInit } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser';
import { ActivatedRoute } from '@angular/router';
import { MoviesService } from '../movies.service';

@Component({
  selector: 'app-movie',
  templateUrl: './movie.component.html',
  styleUrls: ['./movie.component.css']
})
export class MovieComponent implements OnInit {
  movie: Object;
  certification: Array<Object>;
  video: Object;
  constructor(
    private _moviesServices: MoviesService,
    private router: ActivatedRoute
  ) {

  }

  ngOnInit() {
    this.router.params.subscribe((params) => {
      const id = params['id'];
      this._moviesServices.getMovie(id).subscribe(movie => {
        this.movie = movie;
      });
      this._moviesServices.getCertification(id).subscribe((res: any) => {
        const usCertifications = res.results.filter((result: any) => {
          return result.iso_3166_1 === "US";
          // return this.certification === result.certificationAll;
        });
        this.certification = usCertifications;
      });

    })

  }

}

html:

<div class="mr-3" *ngIf="certification"><span *ngFor="let cert of certification">
          <span *ngFor="let release of cert.release_dates">
            <span class="badge badge-pill badge-warning" *ngIf="release.certification">{{release.certification}}</span>
          </span>
        </span>
      </div>

Answer 1

您可以添加一个函数来删除组件中的重复项，或者使用管道来做同样的事情类似于此

result:any=[];
removeDuplicates(): any{
   this.certification.forEach((item)=>{
        if(this.result.indexOf(item) < 0) {
            this.result.push(item);
        }
   });
return this.result;
}

然后在模板中调用

<div class="mr-3" *ngIf="certification"><span *ngFor="let cert of removeDuplicates(certification)">
          <span *ngFor="let release of cert.release_dates">
            <span class="badge badge-pill badge-warning" *ngIf="release.certification">{{release.certification}}</span>
          </span>
        </span>
      </div>

Answer 2

您可以编写一个管道，其中包含数组和 returns 非重复项。

@Pipe({ name: 'duplicate' })
export class DuplicatePipe implements PipeTransform {
  transform(elements: any[]) {
     let result = [];
     elements.forEach(element => {
      if (!elements.find(fEle => fEle.certification === element.certification)) {
        result.push(element);
      }
    });
  return result;
  }
}

并在模板中：

<div class="mr-3" *ngIf="certification"><span *ngFor="let cert of certification">
          <span *ngFor="let release of cert.release_dates | duplicate">
            <span class="badge badge-pill badge-warning" *ngIf="release.certification">{{release.certification}}</span>
          </span>
        </span>
</div>

Answer 3

我假设您想删除仅基于 certification 属性.

的重复项

分量：

在您的组件中添加以下 removeDuplicates() 函数。

我们正在使用 JavaScript Map 对象来跟踪重复项。

removeDuplicates(certification): any {
    certification.forEach((item) => {
      var filteredResults = new Map();

      item['release_dates'].forEach((value) => {
        if (!filteredResults.has(value.certification)) {
          filteredResults.set(value.certification, value);
        }
      });

      item['release_dates'] = [];

      filteredResults.forEach((value, key) => {
        item['release_dates'].push(value);
      });
    });

    return certification;
  }

HTML:

在您的 HTML 中调用 *ngFor 中的 removeDuplicates() 函数，如下所示。

<div class="mr-3" *ngIf="certification">
    <span *ngFor="let cert of removeDuplicates(certification)">
    <span *ngFor="let release of cert.release_dates">
      <span class="badge badge-pill badge-warning" *ngIf="release.certification">{{release.certification}}<br></span>
    </span>
  </span>
</div>

您可以在 StackBlitz 上实时查看它：https://stackblitz.com/edit/angular-4yklwe

Answer 4

假设您想根据 certification 属性过滤掉重复项，因此我们可以使用 filter() 来做到这一点。如果不是属性，只需在下面的代码中更改要过滤的属性。此外，我假设从您得到的原始响应中，您只需要一个对象（美国证书），因此无需使用 filter() 制作数组，而是使用 find()。这样我们只得到一个对象。所以我建议如下：

certifications = [];

// ...

this._moviesServices.getCertification(id).subscribe((res: any) => {
  const uscerts = this.results.find((result: any) => (result.iso_3166_1 === "US"));

  if (uscerts && uscerts.release_dates && uscerts.release_dates.length) {
    this.certifications = uscerts.release_dates.filter((item, i, arr) =>
      // filter by what prop you want, here we use certification
      arr.findIndex((x) => (x.certification === item.certification)) === i);
  } else {
    this.certifications = [];
  }
});

现在您可以迭代 this.certifications 中的数组：

<span *ngFor="let release of certifications">
  {{release.certification}}
</span>

DEMO: StackBlitz

此外，我建议您实际为数据使用模型，而不是使用 any。如果您尝试做错事，IDE 会警告您，让您的生活变得更轻松 ;)

从视图中删除重复值 - Angular

Remove duplicate values from view - Angular

themoviedb-api

angular

angular6

angular7

angular8