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

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

您只需要使用sort函数按截止日期对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);