Angular 2 groupby或过滤管道

Question

我在 symfony 3 中使用 Angular 2。我有数据 array，一些数据是相同的。我想相同的数据只显示一个。我搜索了 pipe，发现是这样的:

import { Pipe, PipeTransform } from "@angular/core";
@Pipe({name: 'groupBy'})
export class GroupByPipe implements PipeTransform {
    transform(value: Array <any> , field: string): Array <any> {
        const groupedObj = value.reduce((prev, cur) => {
            if (!prev[cur[field]]) {
                prev[cur[field]] = [cur]
            } else {
                prev[cur[field]].push(cur);
            }

            return prev;
        }, {});

        return Object.keys(groupedObj).map(key => ({
            key,
            value: groupedObj[key]
        }));
    }
}

当我运行我的项目时出现此错误:

inline template:14:16 caused by: Cannot read property 'reduce' of undefined

我该如何解决我的问题？

还有我的模板:

<tr *ngFor="let model of data | groupBy:'firstName,lastName'">
   <td>{{ model.user.firstName || '-' }} {{ model.user.lastName || '-' }}</td>
</tr>

现在我可以运行了，但是这次我得到了 firstName undifened 错误。

我应该如何称呼 firstName？

Answer 1

如果值是 undefined(可能发生在数据还没有加载或其他情况下)，那么你应该捕获异常。

transform(value: Array <any> , field: string): Array <any> {
    if (value) {
        const groupedObj = value.reduce((prev, cur) => {
            if (!prev[cur[field]]) {
                prev[cur[field]] = [cur]
            } else {
                prev[cur[field]].push(cur);
            }

            return prev;
        }, {});

        return Object.keys(groupedObj).map(key => ({
            key,
            value: groupedObj[key]
        }));
    } else {
        return null;
    }
}