どうやってオブジェクトの配列を反復処理し、最後のものとは異なるときにグループラベルを変更できますか？

Question

私はこのようになりますオブジェクトの配列があります

[ 
    {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'} 
] 

を、私は* ngForでそれを反復し、この結果を取得したい：

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

をし、私の問題があり、どのように私はやります各 "セクション"の先頭に1回だけgroup_labelを表示します。 FormArraysのAngulars FormGroupのように、これらのオブジェクトをこのタスクに適したものに再フォーマットすることはできません。

Answer 1

あなたがグループにこれらのパイプを作成することができます。

@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]})); 
    } 
} 

今ネストされた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

私は、2つのngForを使用してカスタムパイプを作成するか、または機能ごとにグループを持つ関数を作成する唯一の方法と思います。その後、2番目のngForでキー値のペアを書き出すことができます。

少なくともエレガントな方法は、前の要素をインデックスで参照して、group_labelが違っていて、その新しいセクションを作成しているかどうかを確認することです。その場合、配列はすでにソートされていなければなりません！