Question

我有一个应用程序，用于从数据库（postgres）中获取数据，并以表格格式在前端显示数据。我有ngx-bootstrap中的datepicker，想根据显示的表中的输入对日期进行排序。由于orderByPipes已被弃用https://angular.io/guide/pipes#appendix-no-filterpipe-or-orderbypipe

，因此实现此操作有些棘手

https://auth0.com/blog/real-world-angular-series-part-3/#angular-filterSort-service是一个类似的解决方案，但是当日期选择器出现问题时，这仍然不能解决问题。

我已经尝试实现auth0教程，但是这里主要是对日期进行排序，而不是基于datepicker输入。

日期选择器的ngx-bootstrap代码

<div class="row">
  <div class="col-xs-12 col-12 col-md-4 form-group">
  <input type="text" class="form-control" #dp="bsDatepicker" bsDatepicker [(bsValue)]="bsValue">
  </div>
</div>

组件代码

Component.html

<div *ngFor="let rep of report">
  <tr>
    <th>{{rep.Date | date : fullTime}}</th>
    <th>{{rep["1"]}}</th>
    <th>{{rep["2"]}}</th>
    <th>{{rep["3"]}}</th>
    <th>{{rep["4"]}}</th>
    <th>{{rep["5"]}}</th>
    <th>{{rep["6"]}}</th>
    <th>{{rep["7"]}}</th>
    <th>{{rep["8"]}}</th>
  </tr>
</div>

datepicker的打字稿代码只是更新为当前值，但除了充当占位符外，实际上并没有帮助

  bsValue = new Date();

我要用日期选择器实现的是，当我从日期选择器中选择一个日期时，我希望我的应用以排序的方式（降序/升序）显示该特定日期的数据。我不想更改我的后端数据，只应该对前端显示进行排序。

Answer 1

您可以收听日期选择器的(bsValueChange)="onValueChange($event)"事件，并在每次更改日期时过滤数据。

如何在Angular 7中使用日期选择器对数据进行排序？

1 个答案: