Come raggruppare i dati in Angular 2?

Come posso raggruppare i dati in Angular 2 con TypeScript. Sono consapevole che questo viene fatto usando il filtro “raggruppa per” in 1.X angular, ma non ottenendo come raggruppare i dati in Angular 2. Ho questo 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" } ]; 

e sto cercando di contare i dipendenti per dipartimento, come

Il Dipartimento 1 ha 4 dipendenti

e così via.

Unire l’ID del dipartimento con il reparto effettivo (in modo da poter ottenere il nome del dipartimento) è un’altra storia che devo capire.

Puoi usare pipe personalizzate per farlo come descritto di seguito:

 @Pipe({name: 'groupBy'}) export class GroupByPipe implements PipeTransform { transform(value: Array, field: string): Array { 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] })); } } 

E poi sul tuo modello puoi scrivere:

 
Department {{ item.key }} has {{ item.value.length }} employees

Vedi anche plunker corrispondente https://plnkr.co/edit/cLnlH13IH4WAsuRdol4n?p=preview

Spero che ti aiuti!

Puoi usare ngx-pipes 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' }} ]; 
 

{{ arrayObject | groupBy: 'elm' }}

 var dept = employees.map((m) => m.department).filter((f, i, ar) => ar.indexOf(f) === i); console.log(dept); var group = employees.reduce((accumulator, item, i, arr) => { if (dept.length) { var pop = dept.shift(); var list = arr.filter((f) => f.department == pop); accumulator.push(...list); } return accumulator; }, []); console.log(group);