Angular 9 无法在日期管道之后过滤日期 [关闭]答案

【问题标题】：Angular 9 cannot filter date after date pipe [closed]Angular 9 无法在日期管道之后过滤日期 [关闭]
【发布时间】：2020-12-11 12:19:24
【问题描述】：

我在使用 [(ngModel)] 进行日期过滤时遇到问题。我使用 HTTP 服务调用后端并获取日期格式为 2020-12-11T08:53:13.313+0000 的 JSON。接下来，我使用管道将此日期转换为格式：2020-12-11 09:53（我的时区 + 1 小时）。但是，当我尝试通过使用 ngModel 输入来过滤此日期时，它无法正常工作。例如，当我输入像 2020-08-03 15:36 这样的值时，我的搜索是空的，但是当我输入像 2020-08-03T14:36 这样的值时，它可以正常工作。问题出在哪里？

这是我的日期管道：

     <tr *ngFor="let data of myProcess | filter:search1">
       <td>{{data.finishDate  | date:'yyyy-MM-dd HH:mm'}}</td>
       <td>{{data.serviceCode | serviceName}}</td>

还有我更合适的输入：

<div class="col" style="padding: 0px;">
    <input class="form-control2" type="text" name="searchField" [(ngModel)]="search1" autocomplete="on"
      placeholder="Filtruj procesy" style="width: 250px !important;">
  </div>

【问题讨论】：

标签： angular typescript frontend

【解决方案1】：

日期管道仅格式化<td> 上显示的值，它不会更改列表数据的内容。所以发送到 search1 的值没有被格式化。有一些方法可以解决这个问题，一种是在过滤器管道内应用相同的日期管道。您可以在过滤器管道内有一个构造函数并在那里注入 DatePipe。

过滤日期列表的一个示例： https://stackblitz.com/edit/angular-ivy-filter-date-list?file=src%2Fapp%2Fapp.component.html

【讨论】：