时间戳

首页 > 解决方案 > 按月过滤列表

angular - 按月过滤列表

问题描述

有什么办法可以按月过滤。这样我们就可以在特定月份加载事件。这是我的代码和演示stackblitz作为您的参考。实际上，我在 vscode 中的实际代码调用 API 进行过滤。而且我不知道如何在 stackblitz 中提供 API 进行演示。

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');
  }

标签： angulartypescript

解决方案

您可以使用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
          )
        });
      });
}

工作演示

推荐阅读