Как группировать данные в Angular 2?

Как я могу группировать данные в Angular 2 с помощью TypeScript. Я знаю, что это делается с использованием фильтра «group by» в Angular 1.X, но не получается, как группировать данные в Angular 2. У меня есть этот массив:

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

и я рассчитываю считать сотрудников отделом, например

В отделе 1 работают 4 сотрудника

и так далее.

Присоединение к идентификатору отдела с фактическим отделом (чтобы я мог получить название отдела) – это еще одна история, которую мне нужно выяснить.

Вы можете использовать пользовательский канал для этого, как описано ниже:

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

А затем на свой шаблон вы можете написать:

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

См. Также соответствующий плункер https://plnkr.co/edit/cLnlH13IH4WAsuRdol4n?p=preview

Надеюсь, это поможет вам!

Вы можете использовать ngx-pipe 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); 
  • Как использовать плагин jQuery с угловым 4?
  • Что такое эквивалент httpinterceptor в угловом2?
  • Angular2 SEO - Как сделать угловое приложение с возможностью сканирования 2
  • Как определить внутреннее изменение html в div с угловым 2?
  • Как внедрить SignIn с Google в Angular 2 с помощью TypScript
  • DI с циклической зависимостью от пользовательских HTTP и ConfigService
  • Как включить внешний файл js в Angular 4 и функцию вызова от углового до js
  • Использование ui-router с Bootstrap-ui modal
  • ПРЕДУПРЕЖДЕНИЕ: очистка небезопасного значения значения стиля
  • Когда использовать интерфейс и модель в TypeScript / Angular2
  • кеширование результатов с помощью услуги angular2 http
  • Давайте будем гением компьютера.