2017-05-01 2 views
-3

Je souhaite créer un tube pour vérifier un objet spécifique, pas tous. Ce Pipe devra cacher le double.Tuyau angulaire pour masquer les doublons d'un tableau

pipe

import { Pipe } from '@angular/core' 
@Pipe({ 
    name: 'removeduplicates' 
}) 
export class RemovePipe { 

} 

Modèle

<tbody *ngFor="let dt of ash let i = index | removeduplicates: " > 
    <tr> 
     <td class="tg-yw4l nobord" style="border-left: inset;border-right: none;">{{dt.values}}</td>   
     </tr> 
    <tr>    
     <td>{{dt.value2}}</td> 
    </tr> 
</tbody> 
+0

Ceci probablement ne devrait pas être un tuyau, mais il devrait être fait sur votre backend ou composant. – Sakuto

+0

Le composant d'arrière-plan ne peut pas être utilisé à d'autres fins. Si vous avez un autre moyen, peut-être sur le frontend ce serait génial. – user2543190

+0

Sur quelle propriété voulez-vous filtrer vos éléments? – Sakuto

Répondre

0

sur votre appareil s'il vous plaît ajouter une fonction à supprimer les doublons

result:any=[]; 
removeDupliacate(){ 
    ash.forEach(function(item) { 
     if(this.result.indexOf(item) < 0) { 
      this.result.push(item); 
     } 
    }); 
} 

puis dans votre modèle

<tbody *ngFor="let dt of result;let i = index" > 
    <tr> 
     <td class="tg-yw4l nobord" style="border-left: inset;border-right: none;">{{dt.values}}</td>   
     </tr> 
    <tr>    
     <td>{{dt.value2}}</td> 
    </tr> 
</tbody> 

ou vous pouvez mettre en œuvre tuyau à l'aide de lodash en installant

$ npm install --save lodash 

ce link peut vous aider à installer et à utiliser lodash

dans votre composant:

import { Pipe, PipeTransform } from '@angular/core'; 
import * as _ from 'lodash'; 
@Pipe({ 
    name: 'removeduplicates' 
}) 
export class RemovePipe implements PipeTransform{ 
    transform(value: any): any{ 
     if(value!== undefined && value!== null){ 
      return _.uniqBy(value, 'name'); 
     } 
     return value; 
    } 
} 

et dans votre modèle

<tbody *ngFor="let dt of ash let i = index | removeduplicates" > 
    <tr> 
     <td class="tg-yw4l nobord" style="border-left: inset;border-right: none;">{{dt.values}}</td>   
     </tr> 
    <tr>    
     <td>{{dt.value2}}</td> 
    </tr> 
</tbody>