Вы можете использовать DatePipe
для группировки данных по месяцам.
private datePipe = new DatePipe('en-US');
...
let data = new Set(this.products.map(item => this.datePipe.transform(item.date, 'MMMM yyyy')));
data.forEach((date) => {
this.resultData.push({
date: date,
bug: this.products.filter(i => this.datePipe.transform(i.date, 'MMMM yyyy') === date)
})
});
В шаблоне вам больше не понадобится конвейер даты, так как monthData.date
уже требуемый формат.
<div class="upcoming-container-title-section color">
Group Month | {{ monthData.date }}
</div>
Пожалуйста, ознакомьтесь с исправленным StackBlitz
ОБНОВЛЕНИЕ
Чтобы убедиться, что данные отсортированы правильно, вы должны использовать другой формат при преобразовании даты с DatePipe
(Убедитесь, что вы используете ISO 8601 формат даты, потому что теперь мы снова будем использовать дату труба в шаблоне для получения желаемого окончательного формата). Чтобы отсортировать даты, Set
необходимо преобразовать в array
, используя Array.from()
.
let data = new Set(this.products.map(item => this.datePipe.transform(item.date, 'yyyy-MM')));
Array.from(data).sort().forEach((date) => {
this.resultData.push({
date: date,
bug: this.products.filter(i => this.datePipe.transform(i.date, 'yyyy-MM') === date)
})
});
А вот и обновленный StackBlitz