Группировка списка по дате

Question

Я хочу отобразить группировку списка по дате. Пример, подобный приведенному ниже изображению, но я понятия не имею, как заставить его работать.

Это мой пример кода и демонстрационная версия на Stackblitz

app.component. html

<div *ngFor="let monthData of products">
<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 products" class="col-xl-2 col-lg-3 col-md-4 col-sm-6 col-6 upcoming-container-card-item">
            <app-card [listData]="listData"></app-card>
        </div>
      </div>
    </div>
</div>

card.component.ts

 _listData: listData;

  @Input()
  set listData(data: listData) {
    this._listData = data;
  }
  get listData() {
    return this._listData;
  }

  constructor() { }
}

card.component. html

<div class="cards-list">

<div class="card 1">
  <div class="card_image"> <img src="https://i.redd.it/b3esnz5ra34y.jpg" /> </div>
  <div class="card_title title-white">
    <p>{{listData.date | date: 'd MMM yyyy'}}</p>
  </div>
</div>

</div>

Answer 1

К сожалению, нет такой group by функции, предлагаемой *ngFor. Вы должны изменить свою логику c, чтобы сделать это.

в вашем 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.products" 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>

в component.ts:

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

Здесь рабочий пример: демо