Angular 2'de veri nasıl gruplanır?

Question

Angular 2'de, TypeScript ile verileri nasıl gruplandırabilirim. Bu Açısal 1.X filtre "gruplama" kullanılarak yapılır farkındayım, ama bu dizi kaç Açısal 2. grup verilerini elde değil:

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

ve ben çalışanları saymak için arıyorum departmanı tarafından,

Bölümü gibi 1 ila 4 çalışanı

ve benzeri bulunur.

Departman kimliğini gerçek bölümle birleştirerek (bölüm adını alabilmem için) anladığım başka bir hikaye var.

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

Sonra Şablonunuzdaki yazabilirsiniz:: Aşağıda açıklandığı gibi

Answer 1

Bunu geride kalan custom pipe kullanabilirsiniz

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

Ayrıca bkz tekabül plunker https://plnkr.co/edit/cLnlH13IH4WAsuRdol4n?p=preview

Umut Bu size yardımcı olur!

Answer 2

kullanabilirsiniz NGX-borular cevap için 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}]}" -->