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

Question

我有一个 Angular 2 项目，并且正在获取我希望在 UI 中显示为组的结果列表。我想按正在返回的值之一进行分组，并显示组中项目的详细信息。

目前，我已尝试使用 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

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

更新 #1：
我构建了一个 plunkr ，它使用更易于遵循的方法将未分组的数据转换为分组对象的数组以及使用它的示例。我还提供了一个演示，说明如何动态更改分组值。

原答案：
出于各种原因，我建议您在组件中进行分组而不是作为管道进行分组，例如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>