angular - 如何在 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>