如何在Angular 2模板中分组数据和输出--使用管道？

我有一个Angular 2项目，得到了一个结果列表，我想在UI中以组的形式显示。我想按返回的值之一分组，并显示组中项目的详细信息

目前，我试图通过使用来实现这一点，但在模板中使用时遇到了问题

我试过这个：

<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#U版本”：0.2}

更新#2:
添加了上的示例，因为plunk上的引用已过时（并且因为StackBlitz更易于使用/管理）

更新#1:
我构建了一个应用程序，它使用一种更易于遵循的方法将未分组的数据转换为分组对象的数组，并提供了一个使用它的示例。我还提供了一个演示，演示了如何动态更改分组值

原始答案：
出于各种原因，我建议您在组件中进行分组，而不是作为管道进行分组

下面是一些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>

常量myData={
“结果”：[
[“Vlookken melk-pak巧克力300克”、“8710400407010”、“Albert Heijn”、“Hagelslag”、“1,2”、“701”和“”]，
[“vlokken puur-pak巧克力300克”、“8710400406990”、“Albert Heijn”、“Hagelslag”、“1、1”、“701”、“1”]，
[Chocoladevlokken melk-pak 300克（Kiekeboe）”、“23029217”、“Aldi”、“Hagelslag”、“1,2”、“612”和“”，
[“巧克力300克（Kiekeboe）”、“23029217”、“Aldi”、“Hagelslag”、1、2、“、”612“、”，
],
“api_版本”：0.2
};
//将结果转换为分组结果
//您可以轻松地将其提取到一个函数中，只需将结果和要分组的数组索引传入即可
const groupedResults=[…myData.results.reduce（（散列，结果）=>{
//从要分组的每个“结果”中指定值
组=结果[2]；
//将结果添加到现有组（如果存在），或创建一个新组并将其添加
const currentGroup=hash.get（group）|{group，items:[]}；
currentGroup.items.push（结果）；
返回hash.set（组、当前组）；
}，新映射）。值（）；
//在控制台中显示分组结果
log（“新分组结果：”，groupedResults）；

您还可以给出一个typescript示例吗？那太好了！我尝试了它并使其工作：

constgroupedresults=[myData.results.reduce（（hash，result）=>{this.group=result[2]；constcurrentgroup=hash.get（this.group）| |{items:[]}；currentGroup.items.push（result）；返回hash.set（this.group，currentGroup）；}，新映射）。值（）唯一不起作用的是'hash.get（this.group）|{this.group，items:[]}；`因此，我必须用
hash.get（this.group）| |{items:[]}替换它想法是如何修复的？@MaartenHeideman，我在TypeScript中添加了Plunkr，它具有更易于遵循的代码来进行转换，以及一些示例输出和允许动态更改分组的快速示例。@MaartenHeideman，感谢您的反馈。希望有用。：）@为什么我会犯这个错误？results.reduce（…）.values（…）.slice不是函数
<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>