javascript - 如何按日期过滤列表角度6
问题描述
我正在开发一个 Angular 6 的工具,每个登录用户都有一些分配的任务。目前,我正在一个数组中完成所有任务。我在客户端进行了一些操作,例如添加开始和结束时间并将所有内容存储在本地存储中。我想按日期过滤任务意味着今天的任务显示在今天的列表中,明天的任务显示在明天的列表中,并且整个星期都相同。
// response
[{
"id": "5c9a108aab16141aca472980",
"idBoard": "5c7cf3d22c86ae1f9a210571",
"idList": "5c7cf40cb8f22b26862602aa",
"name": "Newest Card 1",
"due": "2019-03-27T06:30:00.000Z",
"time": "2019-03-25T18:30:12.000Z"
},
{
"id": "5c9a108aab16141aca472950",
"idBoard": "5c7cf3d22c86ae1f9a210571",
"idList": "5c7cf40cb8f22b26862602aa",
"name": "Newest Card 2",
"due": "2019-03-27T06:30:00.000Z"
},
{
"id": "5c9a108aab16141aca472960",
"idBoard": "5c7cf3d22c86ae1f9a210571",
"idList": "5c7cf40cb8f22b26862602aa",
"name": "Newest Card 3",
"due": "2019-03-27T06:30:00.000Z"
},
{
"id": "5c9a108aab16141aca472970",
"idBoard": "5c7cf3d22c86ae1f9a210571",
"idList": "5c7cf40cb8f22b26862602aa",
"name": "Newest Card 4",
"due": "2019-03-27T06:30:00.000Z",
"time": "2019-03-25T18:30:50.000Z"
}
]
<div class="card width hr" *ngFor="let item of allUserTaskArr;let i = index">
<div class="card-header">
<span class="due" [ngClass]="{'text-orange': (item.due | date) == (today | date), 'text-red': (item.due | date) < (today | date), 'text-default': (item.due | date) > (today | date)}" ><i class="fa fa-calendar"></i> {{item.due | date}}</span>
<span class="float-right font-weight-bold pad-top-05" [class.due-time] = "(item.time | date:'HH:mm:ss') != undefined" [class.text-default] = "(item.time | date:'HH:mm:ss') != undefined" *ngIf="(item.time | date:'HH:mm:ss') != '00:00:00'">
<i class="fa fa-clock-o" *ngIf="(item.time | date:'HH:mm:ss') != undefined"></i> {{item.time | date:'HH:mm:ss'}}
</span>
<a class="link mar-l-r-1 float-right pad-top-05" ><i class="fa fa-check-square-o" aria-hidden="true"></i> Create Checklist</a>
<a class="link mar-l-r-1 float-right pad-top-05" *ngIf="item.timeEntries != undefined" (click)="hideme[i] = !hideme[i]"><i class="fa fa-calendar-check-o"></i> Time Entries</a>
</div>
<div class="card-body pad-125">
<div class="row no-gutters">
<div class="col-md-12">
<span *ngIf="role === 'tl' || role === 'tm'">
<input type="checkbox" class="" (change)="finsishTask(item)">
</span>
<h6 class="display-inline-block pad-t-075 mar-btm-05">{{item.name}}</h6>
<div class="float-right">
<button class="btn btn-info mar-l-r-0-5 box-shadow" *ngIf="item.start" (click)="startTask(item);setStartTime(item)"><i class="fa fa-clock-o"></i> Start</button>
<button class="btn btn-danger mar-l-r-0-5 box-shadow" *ngIf="item.end" (click)="EndTask(item);setEndTime(item)"><i class="fa fa-stop-circle"></i> End</button>
</div>
</div>
<div class="col-md-12" *ngIf="hideme[i]" [@enterAnimation]>
<hr class="hr">
<h6 class="mar-btm-05">Time Entries</h6>
<div class="row no-gutters">
<div class="col-md-4" *ngFor="let time of item.timeEntries">
<i class="fa fa-calendar"></i>
<span *ngIf="time.startTime != 'null'">{{time.startTime | date: 'dd/MM, (h:mm a)'}}</span> -
<span *ngIf="time.endTime != 'null'">{{time.endTime | date: 'dd/MM, (h:mm a)'}}</span>
</div>
</div>
</div>
</div>
</div>
</div>
在上面的代码中,我得到了这种响应,我想在到期日过滤客户端的任务。先感谢您。
解决方案
其实很简单。让我稍微修改一下您的示例数据,使最后一个元素的arr
日期不同。
const arr = [{
"id": "5c9a108aab16141aca472980",
"idBoard": "5c7cf3d22c86ae1f9a210571",
"idList": "5c7cf40cb8f22b26862602aa",
"name": "Newest Card 1",
"due": "2019-03-27T06:30:00.000Z",
"time": "2019-03-25T18:30:12.000Z"
},
{
"id": "5c9a108aab16141aca472950",
"idBoard": "5c7cf3d22c86ae1f9a210571",
"idList": "5c7cf40cb8f22b26862602aa",
"name": "Newest Card 2",
"due": "2019-03-27T06:30:00.000Z"
},
{
"id": "5c9a108aab16141aca472960",
"idBoard": "5c7cf3d22c86ae1f9a210571",
"idList": "5c7cf40cb8f22b26862602aa",
"name": "Newest Card 3",
"due": "2019-03-27T06:30:00.000Z"
},
{
"id": "5c9a108aab16141aca472970",
"idBoard": "5c7cf3d22c86ae1f9a210571",
"idList": "5c7cf40cb8f22b26862602aa",
"name": "Newest Card 4",
"due": "2019-03-28T06:30:00.000Z",
"time": "2019-03-25T18:30:50.000Z"
}
]
以下是我们如何对您的数组进行排序:
const sortedArr = [...arr].sort((a,b)=> a.due - b.due);
如果您想过滤数据以便只返回今天到期的任务,
const today = new Date().setHours(0,0,0,0);
const filterToday = arr.filter(obj => new Date(obj['due']).setHours(0,0,0,0) === today);
console.log(filterToday);
我们将小时数设置为 (0,0,0,0),以便过滤函数中仅考虑日期/月份/年份。
同样,如果您想获得明天到期的任务,
const tomorrow = new Date();
tomorrow.setDate(new Date().getDate() + 1);
const filterTomorrow = arr.filter(obj => new Date(obj['due']).setHours(0,0,0,0) === tomorrow.setHours(0,0,0,0));
console.log(filterTomorrow);
推荐阅读
- windows - rs.update 在 Win Server 2016 上失败 - Microsoft][Oracle 的 ODBC 驱动程序]一般错误
- python - 重新索引 Dataframe 的 DatetimeIndex 只给出缺失的数据
- android - Notifydatasetchanged 在 Recycler 视图 Android 中不起作用
- express - Vue 路由器与 Express 后端
- google-cloud-platform - 尝试在 Google Cloud 上部署节点 js 应用程序时出现以下错误
- llvm - 具有不同数组大小的 LLVM ArrayType
- python - 如何在 Python 中为变量设置限制?
- node.js - 执行经过身份验证的 keystone.js / GraphQL API 查询
- php - woocommerce 中移动视图上的手风琴标签标题图标
- prometheus - 无法计算 Prometheus 中两个指标的比率