Question

我对Angular 2很新。那么有人可以帮助我在Angular 2中创建自定义管道吗？

我尝试过以下更改

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({name: 'groupTransactions'})

export class GroupTransactionsPipe implements PipeTransform {
  transform(transactions: Array): Array {

    const grouped = transactions.reduce( (grouping, item) => {
    let month = new Date(item.date).getMonth()+1 ;
      grouping[month] = grouping[month] || [];
      grouping[month].push(
        {
          id: item.id,
          name: item.name, 
          price: item.price
     date: item.date
        }
      );
      return grouping;
    }, {} )
    // 'grouped' is an object with properties keyed on date 
    // and each property value is an array of items

    const result = Object.keys(grouped) 
      .map(key => {
        const val = 
        {
          date: key, 
          items: grouped[key] // can sort here by price or name
        }; 
        return val;
      })
      .sort(function (a, b) {
        return b.date - a.date;
    });
    // Object.keys makes an array
    // so now we have an array of objects 
    // each with a date property and an items property
    // which is an array of objects (as shaped above) 
    // and finally sort on date

    return result
  }
}

但错误的日期是1970年1月而不是2017年9月。目前我们按日期获得了groupby但是我希望它按月发布。简而言之，如果交易在同一个月的不同日期进行，则应在9月份之前进行分组。因此，在自定义管道中获取groupByMoth需要进行哪些更改。所以我将得到如下输出：

September 17

product 11     £15.00
product 22     £15.00
19 Sep 2017

product 11     £15.00
product 22     £15.00
17 Sep 2017


    August 17

product 11     £15.00
product 22     £15.00
20 Aug 2017

product 11     £15.00
product 22     £15.00
04 Aug 2017


    July 17

product 33     £10.00
product 44     £20.00

    January 16

product 66     £10.00
product 77     £20.00

你能帮忙实现这个目标吗？

Answer 1

以下是我认为应该做的工作，不需要外部库

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({name: 'groupTransactions'})
export class GroupTransactionsPipe implements PipeTransform {
  transform(transactions: Array): Array {

    const grouped = transactions.reduce( (grouping, item) => {
      let month = new Date(item.date).getMonth()+1 ;
      grouping[month] = grouping[month] || [];
      grouping[month].push(
        {
          id: item.id,
          name: item.name, 
          price: item.price,
          date: item.date
        }
      );
      return grouping;
    }, {} )
    // 'grouped' is an object with properties keyed on date 
    // and each property value is an array of items

    const monthNames = ["January", "February", "March", "April", "May", 
                        "June", "July", "August", "September", "October",
                        "November", "December"];

    const result = Object.keys(grouped) 
      .map(key => {
        const val = 
        {
          month: key,
          monthName: monthNames[key-1], 
          items: grouped[key] // can sort here by price or name
        }; 
        return val;
      })
      .sort(function (a, b) {
        return b.month - a.month;
    });
    // Object.keys makes an array
    // so now we have an array of objects 
    // each with a date property and an items property
    // which is an array of objects (as shaped above) 
    // and finally sort on date

    return result
  }
}

模板：

<ul>
  <li *ngFor="let dateGroup of transactions | groupTransactions">
    {{ dateGroup.monthName }}
    <ul>
        <li *ngFor="let item of dateGroup.items">
        {{ item.name }} {{ item.price }}
        </li>
    </ul>
  </li>
</ul>

Answer 2

一个简单的解决方案是 lodash groupBy

＆＃13;

console.log(_.groupBy([{
    "id": "1",
    "date": 1505408124000,
    "name": "product 11",
    "price": "£15.00"
  },
  {
    "id": "2321",
    "date": 1505408124000,
    "name": "product 112323232",
    "price": "£12325.00"
  },
  {
    "id": "2",
    "date": 1505829312000,
    "name": "product 22",
    "price": "£20.00"
  },
  {
    "id": "3",
    "date": 1505838225000,
    "name": "product 33",
    "price": "£10.00"
  }
],  'date'))

＆＃13;

<script src="https://cdn.jsdelivr.net/npm/lodash@4.17.4/lodash.min.js"></script>

＆＃13;

如何使用Angular 2中的自定义管道按JSON对象进行分组？

2 个答案: