Angular 2 groupby或过滤管道

时间:2017-05-02 09:05:49

标签: angular pipe

我正在使用带有symfony 3的Angular 2.我有数据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>

如何解决我的问题?

我的模板:

undifened

现在我可以运行,但这次我收到firstName firstName错误。

我该如何致电 private static final int PERMISSION_ACCESS_COARSE_LOCATION = 0; if (ContextCompat.checkSelfPermission(MainActivity.this, Manifest.permission.ACCESS_COARSE_LOCATION) != PackageManager.PERMISSION_GRANTED) { ActivityCompat.requestPermissions(MainActivity.this, new String[]{Manifest.permission.ACCESS_COARSE_LOCATION}, PERMISSION_ACCESS_COARSE_LOCATION); }

1 个答案:

答案 0 :(得分:4)

如果值为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;
    }
}