Question

我有一个名为JSON的{{1}}文件。它的模板如下：

JSON文件

tasks

就像在JSON中一样，我有一个基于[ { "taskName": "Task - 1", "id": "01", "startDate": "2019-04-17T18:30:00Z" <========== }, { "taskName": "Task - 2", "id": "02", "startDate": "2019-04-22T14:30:00Z" }, { "taskName": "Task - 3", "id": "03", "startDate": "2019-04-17T12:30:00Z" <======== }, { "taskName": "Task - 4", "id": "04", "startDate": "2019-04-25T18:10:00Z" } ]的属性startDate，我想显示任务，如下所示：

我试图像这样基于日期进行过滤：

HTML

startDate

TS

<div class="cust-detail" *ngFor="let task of getTaskByDate(myDate)">
    <tr>
        <td>Task Name: </td>
        <td>{{task.taskName }}</td>
    </tr>   
</div>

我的方法有什么问题？这里是 DEMO

Answer 1

在您的html中，您调用let task of getTaskByDate(myDate)，其中myDate = new Date();因此public getTaskByDate (myDate: string): ITasks将是public getTaskByDate (myDate: Date): ITasks

在那之后，匹配日期很容易。

第一种方法（更改过滤器规则） new Date(x.startDate).toDateString() === myDate.toDateString()

第二种方法：

public getTaskByDate (myDate: Date): ITask[]  {
      const dateString = myDate.toJSON().substr(0, 10);
      return this.tasks ? this.tasks.filter(x => x.startDate.substr(0, 10) === dateString) : [];
  }

尽管有问题，但是您应该将ITasks接口名称最终更改为ITask，并使AppComponent属性的类型为ITask[]，因为该名称是谎言。它说ITasks定义了Tasks的集合，而不是单个Task

编辑：将myDate的类型更改为Date。（从getTaskByDate (myDate: string): ITasks到getTaskByDate (myDate: Date): ITask[]，因为myDate始终是Date）

Answer 2

您应该注意两件事：

startDate属性的类型为string，因此无法与Date进行比较；首先需要将其转换为适当的Date对象。
您的startDate包含一个时间，因此也需要考虑到这一点。

这是使用date-fns库（支持摇树）的解决方案，可按日期（忽略时间）过滤任务：

运行npm i date-fns安装Date-Fns。
将这些导入添加到您的TypeScript文件中：import { addDays, parse, startOfDay } from 'date-fns';

public getTaskByDate (myDate: string): ITasks  {
  const date = parse(myDate);                    // parse input string
  const startOfSearch = startOfDay(date);        // start of the day
  const endOfSearch = addDays(startOfSearch, 1); // start of next day

  return this.tasks ? this.tasks.filter(x => {
    const parsedDate = parse(x.startDate);
    return parsedDate >= startOfSearch && parsedDate < endOfSearch;
  }) : [];
}

这是不带Date-Fns的解决方案，再次仅匹配日期：

public getTaskByDate (myDate: string): ITasks  {
  const date = Date.parse(myDate);               // parse input string

  return this.tasks 
    ? this.tasks.filter(x => Date.parse(x.startDate).toDateString() === date.toDateString()) 
    : [];
}

Answer 3

您的过滤器将与以下HTML一起使用

<h4>Today's Task</h4>
<div class="cust-detail" *ngFor="let task of getTaskByDate(myDate)">
    <tr>
        <td>Task Name: </td>
        <td>{{task.taskName }}</td>
    </tr>   
    <hr>
</div>

如果您查看下面的内容，将会看到它确实过滤了对象并仅返回带有myDate = new Date().toDateString()的对象。 toDateString()将日期转换为类似'Wed Apr 17 2019'的字符串，而没有分钟和秒等等。这将比较两个字符串，可能不是最佳选择，但这是一种解决方法。

public getTaskByDate (myDate: string): ITasks  {
    return this.tasks ? this.tasks.filter(x => new Date(x.startDate).toDateString() === myDate) : [];
}

我分叉了您的Stackblitz https://stackblitz.com/edit/angular-movie-read-load-json-sample-eg-muxfzr

根据当前日期获取JSON对象

3 个答案: