Фильтровать список по месяцам

Question

Есть ли способ фильтрации по месяцам. Так что мы можем указать c месяц на событие загрузки. это мой код и демо stackblitz в качестве ссылки. На самом деле, мой реальный код в API вызова vscode для фильтра. И я не знаю, как предоставить API в stackblitz для демонстрации.

app.component. html

<input type="text"
         class="form-control"
         [(ngModel)]="value"
         (ngModelChange)="onValueChange($event)"
         #dp="bsDatepicker"
         bsDatepicker [bsConfig]="{dateInputFormat: 'MMMM'}" (onShown)="onOpenCalendar($event)" />
  <span class="input-group-addon" >


<div *ngFor="let monthData of resultData">
    <div class="upcoming-container">
      <div class="upcoming-container-title-section color">
        Group Month | {{ monthData.date }}
      </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 => 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)
      })
    });
    console.log(this.resultData)
  }

  onOpenCalendar(container) {
    container.monthSelectHandler = (event: any): void => {
      container._store.dispatch(container._actions.select(event.date));
    };     
    console.log(event)  
    container.setViewMode('month');
  }

Answer 1

Вы можете использовать метод getMonth() для фильтрации данных на основе месяца.

Попробуйте так:

onValueChange(date) {
    var monthData = this.products.filter(
      x => new Date(x.date).getMonth() == date.getMonth()
    );
    this.getDisplayData(monthData);
}

getDisplayData(inputData) {
    this.resultData = [];
    let data = new Set(
      inputData.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
          )
        });
      });
}

Рабочая демонстрация