Angular 2 Stopp * NgFor wenn bestimmte Wert finanziert wird

Question

Ich habe eine JSon wie folgt aus:

[ 
{"Name": "xxxx", "country": "country1", etc...} 
{"Name": "xxxx", "country": "country2", etc...} 
{"Name": "xxxx", "country": "country1", etc...} 
{"Name": "xxxx", "country": "country1", etc...} 
] 

... und Code:

<ng-container *ngFor="let contact of contacts"> 
    <ng-container *ngIf="contact.country == 'country1'"> 
    <div>COUNTRY1</div> 
</ng-container></ng-container> 

Dieser Code die Länder1 jedes Mal finden "erstellen country1 " Ich möchte den Länderwert einmal ausdrucken. ist es möglich?

Answer 1

Ich denke, müssen Sie zuerst Ihre Liste zu filtern, basierend auf Ihren Filterkriterien und Druck gefilterte Ergebnis:

<ng-container *ngFor="let contact of contacts | filterBy: 'country1'"> 
    <ng-container ...> 
    <div>COUNTRY1</div> 
</ng-container></ng-container> 

und Rohr erstellen filtern

@Pipe({ 
    name: 'filterBy' 
}) 
export class FilterByPipe implements PipeTransform { 
    transform(value: any[], filter: string): any[] { 
    return value.filter(x => x.country === filter); 
    } 
} 

Answer 2

Sie haben ein Rohr zu schaffen, filtert das Array mit einzigartigen Artikeln:

@Pipe({ 
    name: 'filterUnique', 
    pure: false 
}) 
export class FilterPipe implements PipeTransform { 

    transform(value: any, args?: any): any { 

    // Remove the duplicate elements 
    let uniqueArray = value.filter(function (el, index, array) { 
     return array.indexOf (el) == index; 
    }); 

    return uniqueArray; 
    } 
} 

Dann können Sie Ihre Pfeife anwenden:

<ng-container *ngFor="let contact of contacts | filterUnique"> 
    <ng-container ...> 
    <div>COUNTRY1</div> 
</ng-container></ng-container> 

Arbeitsbeispiel: https://plnkr.co/edit/yxvoKVD3Nvgz0T3AB7w3?p=preview

ODER

Wenn Sie keine Rohre verwenden möchten, dann können Sie eine Menge aller Werte verwenden:

myList = [ 
{"Name": "xxxx", "country": "country1", etc...} 
{"Name": "xxxx", "country": "country2", etc...} 
{"Name": "xxxx", "country": "country1", etc...} 
{"Name": "xxxx", "country": "country1", etc...} 
]; 

myNewSet = Array.from(new Set(myList)); 

Dann Verwenden Sie diesen Satz in der Vorlage.