Это будет день группировки, а не месяц - PullRequest
0 голосов
/ 19 апреля 2020

Я хочу сделать группировку по месяцам. Но это стало похоже на это изображение, когда другой день.

enter image description here

Это мой демонстрационный код и stackblitz

app.component. html

<div *ngFor="let monthData of resultData">
<div class="upcoming-container">
      <div class="upcoming-container-title-section color">
        Group Month | {{monthData.date | date : 'MMMM yyyy' }}
      </div>
      <div class="upcoming-container-card-section">
        <div  *ngFor="let card of monthData.bug" class="col-xl-2 col-lg-3 col-md-4 col-sm-6 col-6 upcoming-container-card-item">
            <app-card [listData]="card"></app-card>
        </div>
      </div>
    </div>
</div>

app.component.ts

let data = new Set(this.products.map(item => item.date))
data.forEach((date)=>{
     this.resultData.push({
        date: date, 
        bug: this.products.filter(i => i.date === date)
      })
      console.log(this.resultData);
})

1 Ответ

3 голосов
/ 19 апреля 2020

Вы можете использовать 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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...