Làm thế nào để nhóm dữ liệu trong Angular 2?

Question

Làm cách nào để nhóm dữ liệu trong Angular 2 với TypeScript. Tôi biết rằng điều này được thực hiện bằng cách sử dụng bộ lọc "nhóm theo" trong Angular 1.X, nhưng không nhận được cách nhóm dữ liệu trong Angular 2. Tôi có mảng này:

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" } 
     ]; 

và tôi đang tìm kiếm nhân viên bởi bộ phận, như cục

1 có 4 nhân viên

và vân vân.

Tham gia ID phòng ban với bộ phận thực tế (để tôi có thể lấy tên bộ phận) là một câu chuyện khác mà tôi cần phải tìm ra.

Answer 1

Bạn có thể sử dụng custom pipe để làm điều đó như mô tả dưới đây:

@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] })); 
    } 
} 

Và sau đó trên mẫu của bạn, bạn có thể viết:

<div *ngFor="let item of employees | groupBy:'department'"> 
    Department {{ item.key }} has {{ item.value.length }} employees 
</div> 

Xem plunker cũng tương ứng https://plnkr.co/edit/cLnlH13IH4WAsuRdol4n?p=preview

Hope nó giúp bạn!

Answer 2

Bạn có thể sử dụng NGX-Ống https://github.com/danrevah/ngx-pipes#groupby

this.arrayObject = [ 
 
    {id: 1, elm: 'foo', value: 0}, 
 
    {id: 2, elm: 'bar', value: 1}, 
 
    {id: 3, elm: 'foo', value: 2}, 
 
    {id: 4, elm: 'foo', value: 2} 
 
]; 
 

 
this.arrayNestedObject = [ 
 
    {id: 1, prop: { deep: 'foo' }}, 
 
    {id: 2, prop: { deep: 'bar' }}, 
 
    {id: 3, prop: { deep: 'foo' }}, 
 
    {id: 4, prop: { deep: 'bar' }} 
 
];

<p>{{ arrayObject | groupBy: 'elm' }}</p> 
 
<!-- Output: "{foo: [{id: 1, elm: 'foo', value: 0}, {id: 3, elm: 'foo', value: 2}, {id: 4, elm: 'foo', value: 2}], bar: [{id: 2, elm: 'bar', value: 1}]}" -->