Question

我正在用角度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>&nbsp; {{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>&nbsp; {{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>&nbsp; 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>&nbsp; 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>&nbsp; 
            <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>&nbsp; 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>&nbsp; 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>&nbsp; 
                <span *ngIf="time.startTime != 'null'">{{time.startTime | date: 'dd/MM, (h:mm a)'}}</span>&nbsp; -&nbsp;
                <span *ngIf="time.endTime != 'null'">{{time.endTime | date: 'dd/MM, (h:mm a)'}}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

在上面的代码中，我得到了这种响应，我想在到期日在客户端过滤任务。预先谢谢你。

Answer 1

您只需使用排序功能按到期日期对 allUserTaskArr 进行排序。

allUserTaskArr.sort((a,b)=>a.due - b.due);

teuxdeux.com还可以根据截止日期找到对所有任务进行分类的信息。为此，您需要将数组简化为一个对象，以到期日为键，并将任务作为其值。

然后它首先显示最近的日期。

您还必须修改html以适应此结构。

Answer 2

实际上很简单。让我稍微修改一下样本数据，以使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);

如何按角度6的日期过滤列表

2 个答案: