Fatal编程技术网
  • angular/
  • Angular 从视图中删除重复值-角度

Angular 从视图中删除重复值-角度

angular angular6

Angular 从视图中删除重复值-角度,angular,angular6,angular7,angular8,themoviedb-api,Angular,Angular6,Angular7,Angular8,Themoviedb Api,下面是我要筛选的重复字段，只显示其中一个而不是两个字段： “发布日期”：[ {“认证”：“PG-13”、“iso_639_1”：“注”：“碲化物电影节”、“发行日期”：“2018-08-31T00:00:00.000Z”、“类型”：1} {“认证”：“PG-13”、“iso_639_1”，“注”：“发布日期”：“2018-09-28800:00:00.000Z”，“类型”：2}]} 下面的组件显示上面json的两条记录： import { Component, OnInit } from '@a

下面是我要筛选的重复字段，只显示其中一个而不是两个字段：

“发布日期”：[ {“认证”：“PG-13”、“iso_639_1”：“注”：“碲化物电影节”、“发行日期”：“2018-08-31T00:00:00.000Z”、“类型”：1}

{“认证”：“PG-13”、“iso_639_1”，“注”：“发布日期”：“2018-09-28800:00:00.000Z”，“类型”：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;
      });

    })

  }

}

从'@angular/core'导入{Component，OnInit}；
从“@angular/platform browser”导入{domsanizer}；
从'@angular/router'导入{ActivatedRoute}；
从“../movies.service”导入{MoviesService}；
@组成部分({
选择器：“应用程序电影”，
templateUrl:'./movie.component.html'，
样式URL:['./movie.component.css']
})
导出类MovieComponent实现OnInit{
电影：对象；
认证：阵列；
视频：对象；
建造师(
私人电影服务：电影服务，
专用路由器：激活的路由
) {
}
恩戈尼尼特（）{
this.router.params.subscribe（（params）=>{
const id=params['id']；
这是._moviesServices.getMovie（id）.subscribe（movie=>{
这部电影=电影；
});
此._moviesServices.getCertification（id）.subscribe（（res:any）=>{
const usCertifications=res.results.filter（（结果：any）=>{
返回result.iso_3166_1==“US”；
//返回this.certification==result.certificational；
});
本证书=美国证书；
});
})
}
}
html:


{{release.certification}
您可以添加一个函数来删除组件中的重复项，或者使用管道来执行相同的操作 类似的东西

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

result:any=[]；
RemovedUpplicates（）：任何{
此.certification.forEach（（项目）=>{
if（此结果索引（项）<0）{
此.result.push（项目）；
}
});
返回此结果；
}
然后在模板中调用它

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


{{release.certification}
您可以添加一个函数来删除组件中的重复项，或者使用管道来执行相同的操作 类似的东西

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

result:any=[]；
RemovedUpplicates（）：任何{
此.certification.forEach（（项目）=>{
if（此结果索引（项）<0）{
此.result.push（项目）；
}
});
返回此结果；
}
然后在模板中调用它

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


{{release.certification}
您可以编写一个管道，其中接收数组并返回非重复项

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


{{release.certification}
您可以编写一个管道，其中接收数组并返回非重复项

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


{{release.certification}
我假设您只想基于
认证
属性删除重复项

组件：

在组件中添加以下
removeDuplicates（）
函数

我们使用JavaScript对象来跟踪重复项

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中调用
removeDuplicates（）
函数中的
*ngFor
，如下所示

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


{{release.certification}}
您可以在StackBlitz上实时看到它：

我假设您只想基于
认证
属性删除重复项

组件：

在组件中添加以下
removeDuplicates（）
函数

我们使用JavaScript对象来跟踪重复项

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中调用
removeDuplicates（）
函数中的
*ngFor
，如下所示

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


{{release.certification}}
您可以在StackBlitz上看到它的直播：

进行了一次飞跃，并假设您希望根据
认证
属性过滤掉重复项，因此我们可以使用
过滤器（）。如果不是该属性，只需在下面的代码中更改要筛选的属性即可。另外，我假设从您得到的原始响应中，您只需要一个对象（美国证书），因此无需使用
filter（）
创建数组，而是使用
find（）
。这样我们只得到一个物体。因此，我建议如下：


认证=[]；
// ...
此._moviesServices.getCertification（id）.subscribe（（res:any）=>{
const uscerts=this.results.find（（结果：any）=>（result.iso_3166_1==“US”）；
if（uscerts&&uscerts.release_dates&&uscerts.release_dates.length）{
this.certifications=uscerts.release\u dates.filter（（项目，i，arr）=>
//根据您需要的道具进行过滤，这里我们使用认证
arr.findIndex（（x）=>（x.certification==item.certification））==i）；
}否则{
这是。认证=[]；
}
});


现在，您可以迭代您在
中拥有的数组。认证
：



{{release.certification}





此外，我建议您实际使用数据模型，而不是使用
any
。如果您试图做错事，IDE可以警告您，这将使您的生活变得更加轻松；）
 跳过一步，假设您希望根据
认证
属性过滤掉重复项，因此我们可以使用
过滤器（）。如果不是该属性，只需在下面的代码中更改要筛选的属性即可。另外，我假设从您得到的原始响应中，您只需要一个对象（美国证书），因此无需使用
filter（）
创建数组，而是使用
find（）
。这样我们只得到一个物体。因此，我建议如下：

认证