如何在 Angular 2 中对数据进行分组? [英] How to group data in Angular 2?
问题描述
如何使用 TypeScript 对 Angular 2 中的数据进行分组.我知道这是在 Angular 1.X 中使用group by"过滤器完成的,但不知道如何在 Angular 2 中对数据进行分组.我有这个数组:
import {Employee} from './employee';出口无功雇员:雇员[];员工 = [{ id: 1, firstName: "John", lastName: "Sonmez", 部门: 1, age: 24, address: "24/7, Working hours apartment, Cal. US", contactNumber: "+968546215789" },{ id: 2, firstName: "Mark", lastName: "Seaman", 部门: 2, age: 25, address: "32-C, Happy apartment, Block-9C, Cal. US", contactNumber: "+968754216984"},{ id: 3, firstName: "Jamie", lastName: "King", 部门: 3, age: 32, address: "54/II, Glorydale apartment, Cal. US", contactNumber: "+967421896326" },{ id: 5, firstName: "Jacob", lastName: "Ridley", 部门: 5, 年龄: 24, address: "24/7, Working hours apartment, Cal. US", contactNumber: "+968546215789" },{ id: 6, firstName: "Peter", lastName: "Parker", 部门: 3, 年龄: 25, 地址: "32-C, Happy apartment, Block-9C, Cal. US", contactNumber: "+968754216984"},{ id: 7, firstName: "Martin", lastName: "Luther", 部门: 4, age: 32, address: "54/II, Glorydale apartment, Cal. US", contactNumber: "+967421896326" },{ id: 8, firstName: "Raghav", lastName: "Kumar", 部门: 1, age: 34, address: "51/C Shivalik, Cal. US", contactNumber: "+967842569842" },{ id: 9, firstName: "Narayan", lastName: "Sonmez", 部门: 3, age: 24, address: "24/7, Working hours apartment, Cal. US", contactNumber: "+968546215789" },{ id: 10, firstName: "Russell", lastName: "Andre", 部门: 2, age: 25, address: "32-C, Happy apartment, Block-9C, Cal. US", contactNumber: "+968754216984"},{ id: 11, firstName: "Ramona", lastName: "King", 部门: 4, age: 32, address: "54/II, Glorydale apartment, Cal. US", contactNumber: "+967421896326" },{ id: 12, firstName: "Andre", lastName: "Russell", 部门: 1, age: 34, address: "51/C Shivalik, Cal. US", contactNumber: "+967842569842" },{ id: 13, firstName: "Nathan", lastName: "Leon", 部门: 1, age: 24, address: "24/7, Working hours apartment, Cal. US", contactNumber: "+968546215789" },{ id: 14, firstName: "Brett", lastName: "Lee", 部门: 5, age: 25, address: "32-C, Happy apartment, Block-9C, Cal. US", contactNumber: "+968754216984"},{ id: 15, firstName: "Tim", lastName: "Cook", 部门: 2, age: 32, address: "54/II, Glorydale apartment, Cal. US", contactNumber: "+967421896326" },{ id: 16, firstName: "Steve", lastName: "Jobs", 部门: 5, age: 34, address: "51/C Shivalik, Cal. US", contactNumber: "+967842569842" }];
我希望按部门统计员工人数,例如
<块引用>部门 1 有 4 名员工
等等.
将部门 ID 与实际部门联系起来(以便我可以获得部门名称)是我需要弄清楚的另一个故事.
我会创建 自定义管道,如下所述:
@Pipe({name: 'groupBy'})导出类 GroupByPipe 实现 PipeTransform {变换(值:数组<任何>,字段:字符串):数组<任何>{const groupedObj = value.reduce((prev, cur)=> {(prev[cur[field]] = prev[cur[field]] || []).push(cur);返回上一个;}, {});返回 Object.keys(groupedObj).map(key => ({ key, value: groupedObj[key] }));}}
然后你可以在你的模板上写:
<div *ngFor="让员工的项目 |groupBy: '部门'>部门 {{ item.key }} 有 {{ item.value.length }} 员工
另见相应的plunker https://plnkr.co/edit/49fWY1rMbSZtNQ3H
How can I group data in Angular 2 with TypeScript. I am aware that this is done using "group by" filter in Angular 1.X, but not getting how to group data in Angular 2. I have this array:
import {Employee} from './employee';
export var employees: Employee[];
employees = [
{ id: 1, firstName: "John", lastName: "Sonmez", department: 1, age: 24, address: "24/7, Working hours apartment, Cal. US", contactNumber: "+968546215789" },
{ id: 2, firstName: "Mark", lastName: "Seaman", department: 2, age: 25, address: "32-C, Happy apartments, Block-9C, Cal. US", contactNumber: "+968754216984" },
{ id: 3, firstName: "Jamie", lastName: "King", department: 3, age: 32, address: "54/II, Glorydale apartment, Cal. US", contactNumber: "+967421896326" },
{ id: 5, firstName: "Jacob", lastName: "Ridley", department: 5, age: 24, address: "24/7, Working hours apartment, Cal. US", contactNumber: "+968546215789" },
{ id: 6, firstName: "Peter", lastName: "Parker", department: 3, age: 25, address: "32-C, Happy apartments, Block-9C, Cal. US", contactNumber: "+968754216984" },
{ id: 7, firstName: "Martin", lastName: "Luther", department: 4, age: 32, address: "54/II, Glorydale apartment, Cal. US", contactNumber: "+967421896326" },
{ id: 8, firstName: "Raghav", lastName: "Kumar", department: 1, age: 34, address: "51/C Shivalik, Cal. US", contactNumber: "+967842569842" },
{ id: 9, firstName: "Narayan", lastName: "Sonmez", department: 3, age: 24, address: "24/7, Working hours apartment, Cal. US", contactNumber: "+968546215789" },
{ id: 10, firstName: "Russell", lastName: "Andre", department: 2, age: 25, address: "32-C, Happy apartments, Block-9C, Cal. US", contactNumber: "+968754216984" },
{ id: 11, firstName: "Ramona", lastName: "King", department: 4, age: 32, address: "54/II, Glorydale apartment, Cal. US", contactNumber: "+967421896326" },
{ id: 12, firstName: "Andre", lastName: "Russell", department: 1, age: 34, address: "51/C Shivalik, Cal. US", contactNumber: "+967842569842" },
{ id: 13, firstName: "Nathan", lastName: "Leon", department: 1, age: 24, address: "24/7, Working hours apartment, Cal. US", contactNumber: "+968546215789" },
{ id: 14, firstName: "Brett", lastName: "Lee", department: 5, age: 25, address: "32-C, Happy apartments, Block-9C, Cal. US", contactNumber: "+968754216984" },
{ id: 15, firstName: "Tim", lastName: "Cook", department: 2, age: 32, address: "54/II, Glorydale apartment, Cal. US", contactNumber: "+967421896326" },
{ id: 16, firstName: "Steve", lastName: "Jobs", department: 5, age: 34, address: "51/C Shivalik, Cal. US", contactNumber: "+967842569842" }
];
and I am looking to count the employees by department, like
Department 1 has 4 employees
and so on.
Joining the department id with actual department (so that I can get the department name) is another story I need to figure out.
I would create a custom pipe to do that as described below:
@Pipe({name: 'groupBy'})
export class GroupByPipe implements PipeTransform {
transform(value: Array<any>, field: string): Array<any> {
const groupedObj = value.reduce((prev, cur)=> {
(prev[cur[field]] = prev[cur[field]] || []).push(cur);
return prev;
}, {});
return Object.keys(groupedObj).map(key => ({ key, value: groupedObj[key] }));
}
}
And then on your template you can write:
<div *ngFor="let item of employees | groupBy: 'department'">
Department {{ item.key }} has {{ item.value.length }} employees
</div>
See also corresponding plunker https://plnkr.co/edit/49fWY1rMbSZtNQ3H
这篇关于如何在 Angular 2 中对数据进行分组?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!