Wie kann ich über ein Array von Objekten iterieren und die Gruppenbezeichnung ändern, wenn sie anders ist als die letzte?

Question

i ein Array von Objekten, die wie folgt aussieht:

[ 
    {group_label: Colors, label: Red, value: '1'}, 
    {group_label: Colors, label: Green, value: '2'}, 
    {group_label: Sizes, label: S, value: '3'}, 
    {group_label: Sizes, label: M, value: '4'}, 
    {group_label: Sizes, label: L, value: '5'} 
] 

, und ich will mit * ngFor darüber iterieren und dieses Ergebnis: i

Colors: 
    Red: 1 
    Green: 2 
Sizes: 
    S: 3 
    M: 4 
    L: 5 

und mein Problem ist, zu tun, wie Zeige group_label nur einmal am Anfang jedes "Abschnitts". Ich kann diese Objekte nicht zu etwas, das für diese Aufgabe besser geeignet ist, neu formatieren, da sie Angulars FormGroup in FormArrays sind.

Answer 1

Sie ein Rohr Gruppe erstellen können diese:

@Pipe({name: 'group'}) 
export class GroupPipe implements PipeTransform { 
    transform(values: Array<any>): Array<any> { 
    // {group_label: Colors, label: Red, value: '1'} 
    const groups = values.reduce((all, row) => { 
     all[row.group_label] = all[row.group_label] || []; 
     all[row.group_label].push(row); 
    }, {}); 
    return Object.keys(groups).map(group => ({ group_label: group, labels: groups[group]})); 
    } 
} 

Jetzt verschachtelt verwenden ngFor:

<div *ngFor="let group of (unsortedGroups | group)"> 
    {{ group.group_label }} 
    <div *ngFor="let label of group.labels"> 
    {{ label.label }}: {{ label.value }} 
    </div> 
</div> 

Answer 2

Ich denke, die einzige Möglichkeit, zwei ngFor zu verwenden und eine benutzerdefinierte Pipe oder eine Funktion mit einer Gruppe nach Funktionalität zu machen. Danach können Sie Ihre Schlüsselwertpaare mit dem zweiten ngFor ausgeben.

Ein eleganter Weg ist es, auf das vorherige Element durch einen Index zu verweisen und zu überprüfen, ob das group_label anders ist und einen neuen Abschnitt davon erstellt. In diesem Fall muss Ihr Array bereits sortiert sein!