Angular 如何基于键值在div容器中包装值

我的angular应用程序中有这个数组

calendarDates = [
  {"date": "2018-10-23", "day": 23, "month":10, "year":2018, "price":"2313", "date_is_valid": true},
  {"date": "2018-10-24", "day": 24, "month":10, "year":2018, "price":"2313", "date_is_valid": true},
  ...
  {"date": "2018-11-01", "day": 1, "month":11, "year":2018, "price":"2313", "date_is_valid": false},
  ...
  {"date": "2019-02-01", "day": 1, "month":12, "year":2019, "price":"2313", "date_is_valid": true}
]

我的目标是在html中使用相同的数组实现此结构：

<div *ngFor='let calendarDate of calendarDates'>
  <div class='month'>
    <div class='october'>
      <p>{{getMonthName}}</p>
      <div class='date'>{{calendarDate.date}} (2018-10-23)</div>
      <div class='date'>{{calendarDate.date}} (2018-10-24)</div>
      ...
    </div>
    <div class='november'>
      <p>{{getMonthName}}</p>
      <div class='date'>{{calendarDate.date}} (2018-11-01)</div>
      ...
    </div>
    <div class='february'>
      <p>{{getMonthName}}</p>
      <div class='date'>{{calendarDate.date}} (2019-02-01)</div>
      ...
    </div>
  </div>
</div>

{{getMonthName}}

{{calendarDate.date}（2018-10-23）
{{calendarDate.date}（2018-10-24）
...
{{getMonthName}}

{{calendarDate.date}（2018-11-01）
...
{{getMonthName}}

{{calendarDate.date}}（2019-02-01）
...

我不知道如何过滤它，以及在html中按月份对日期进行分类并将日期包装到month div的最佳方法是什么

---

如何在ngIf中创建月份包装器？然后，这些值可以在交互过程中更改，例如“价格”或“日期”是有效的，因此它需要是相同的源。

您可以通过创建一个管道进行分类

管 要了解有关此管道的更多信息，请访问

html

可以通过创建一个管道进行分类

管
要了解有关此管道的更多信息，请访问

html

在html中按月份对日期进行分类的最佳方法是什么：最好的方法是不要在html中进行分类。HTML是用来显示东西的。不应用分组算法。在组件中这样做，您可以使用TypeScript的所有功能按您想要的方式对日期进行分组，并提供易于通过视图显示的结构。在html中按月份对日期进行分类的最佳方法是什么：最好的方法是不在html中进行分类。HTML是用来显示东西的。不应用分组算法。在组件中执行此操作，在该组件中，您可以使用TypeScript的所有功能按您想要的方式对日期进行分组，并提供一个易于通过视图显示的结构。
import { Pipe, PipeTransform } from '@angular/core';

@Pipe({name: 'groupBy'})
export class GroupByPipe implements PipeTransform {
    transform(collection: Array, property: string): Array {
        if(!collection) {
            return null;
        }

        const groupedCollection = collection.reduce((previous, current)=> {
            if(!previous[current[property]]) {
                previous[current[property]] = [current];
            } else {
                previous[current[property]].push(current);
            }

            return previous;
        }, {});

        return Object.keys(groupedCollection).map(key => ({ key, value: groupedCollection[key] }));
    }
}

<div *ngFor='let calendarDatesByMonth of calendarDates | groupBy:'month''>
  <div class='month >
    <div class='october'>
      <p>{{getMonthName(calendarDatesByMonth.key)}}</p> <!-- calendarDatesByMonth.key is month number -->
      <div *ngFor='let calendarDate of calendarDatesByMonth.value'  class='date'>{{calendarDate.date}} (2018-10-23)</div>
    </div>
  </div>
</div>