Angular 按月筛选列表

我们有没有办法按月过滤。这样我们就可以了解特定的月份加载事件。 这是我的代码和演示，供您参考。实际上，我在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>

您可以使用

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

---

如果我调用api进行筛选..它的方法也一样吗？逻辑也一样。根据您使用的后端语言，语法可能会有所不同。对于nodeJS，它将是相同的。我使用的是用于UI的角度8。API不是角度的，是另一个。只需检查null。如果（date）{}并且在过滤器中，var monthData=this.products.filter（x=>x.date&&newdate（x.date）.getMonth（）==date.getMonth（））；当您可以要求API返回特定月份的结果时，为什么要指定加载月份？否则，您将一次性获取所有结果。在这种情况下，您需要两个结果体，一个用于保存后端结果，另一个用于查看搜索结果。

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