Как сгруппировать данные и выводить их в шаблон Angular 2 - используя трубу?

Question

У меня есть проект Angular 2, и я получаю список результатов, которые я хотел бы отображать как группы в пользовательском интерфейсе. Я хотел бы сгруппировать по одному из возвращаемых значений и показать детали для элементов в группе.

В настоящее время я попытался выполнить это, используя this groupby pipe, но у меня возникли проблемы с его работой в шаблоне.

Я попытался это:

<ion-list> 
    <div *ngFor="let item of searchresults | orderBy:'item[0]'"> 
     <ion-item-divider sticky>{{ item[2] }}</ion-item-divider> 
     <ion-item (click)="itemTapped($event, item)">{{ item[0] }}</ion-item> 
    </div> 
</ion-list> 

в API возвращает:

{"results":[ 
["Chocolade vlokken melk pak 300 gram ","8710400407010","Albert Heijn","Hagelslag",1,2,"","701",""], 
["Chocolade vlokken puur pak 300 gram ","8710400406990","Albert Heijn","Hagelslag",1,1,"","701",""], 
["Chocoladevlokken melk pak 300 gram (Kiekeboe) ","23029217","Aldi","Hagelslag",1,2,"","612",""], 
["Chocoladevlokken puur pak 300 gram (Kiekeboe) ","23029217","Aldi","Hagelslag",1,2,"","612",""], 

], "api_version": 0,2}

Answer 1

Update:
Я построил plunkr, который использует ier следовать методу преобразования негруппированных данных в массив сгруппированных объектов вместе с примером, который его использует. Я также включил демонстрацию того, как вы можете динамически изменять сгруппированное значение.

Оригинал Ответ:
Я хотел бы предложить вам сделать группировку в компоненте, а не в качестве трубы для целого ряда причин, в explained here in the Angular documentation.

Ниже приведен код ES6, который вы можете использовать для преобразования результатов в сгруппированные результаты, что делает ваш дисплей очень простым. Поместите это на страницу и посмотрите на сгруппированные результаты в консоли.

<script> 
    const myData = { 
     "results": [ 
      ["Chocolade vlokken melk pak 300 gram ", "8710400407010", "Albert Heijn", "Hagelslag", 1, 2, "", "701", ""], 
      ["Chocolade vlokken puur pak 300 gram ", "8710400406990", "Albert Heijn", "Hagelslag", 1, 1, "", "701", ""], 
      ["Chocoladevlokken melk pak 300 gram (Kiekeboe) ", "23029217", "Aldi", "Hagelslag", 1, 2, "", "612", ""], 
      ["Chocoladevlokken puur pak 300 gram (Kiekeboe) ", "23029217", "Aldi", "Hagelslag", 1, 2, "", "612", ""], 
     ], 
     "api_version": 0.2 
    }; 

    // transform results into grouped results 
    // you can easily extract this into a function and just pass your results in and the array index you want to group on 
    const groupedResults = [...myData.results.reduce((hash, result) => { 
     // specify the value from each of your 'results' that you want to group on 
     group = result[2]; 
     // Add the result to existing group if it exists, or create a new group and add it 
     const currentGroup = hash.get(group) || { group, items: [] }; 
     currentGroup.items.push(result); 
     return hash.set(group, currentGroup); 
    }, new Map).values()]; 

    // show grouped results in the console 
    console.log("New Grouped Results: ", groupedResults); 

</script>