按日期对9个角度分组的项目

Question

我需要在Angular ToDo应用中按创建日期对json对象进行分组，但我不知道如何使它工作。管道不起作用：/结果应为：

今天
做作业/ 27.11.2019
跑步/ 27.11.2019

昨天
吃番茄/ 26.11.2019
喝牛奶/ 26.11.2019

旧任务
任务1/2019年11月20日
任务2/2019年11月20日 等

html模板如下所示：

    <div class="edit-popup" *ngIf="show">
      <input type="text" name="" class="edit-item" value="{{value}}" #item>
      <button class="btn-update" (click)="update(item.value)">Update</button>
    </div>

    <input type="text" name="" class="item" #item>
    <button class="btn-add-item" (click)="create(item.value)">Add</button>

    <ul>

        <li *ngFor="let item of mockData" >

        <span [ngClass]="{'done': item.done}" >{{item.title}} {{item.date | date: 'shortDate'}} </span>
        <button (click)="remove(item.id)">Delete</button>
        <button (click)="edit(item.id, item.title)">Edit</button>
        <button (click)="setTaskComplete(item.id)">Complete</button>

      </li>
    </ul>
  </div>

这是数据：

    "id": "1",
    "title": "This is title",
    "done": false,
    "date": "2019-11-26T11:46:18Z"
}, {
    "id": "2",
    "title": "This is title",
    "done": true,
    "date": "2019-11-26T11:46:18Z"
}, {
    "id": "3",
    "title": "This is title",
    "done": false,
    "date": "2017-11-26T11:46:18Z"
}, {
    "id": "4",
    "title": "This is title",
    "done": false,
    "date": "2018-11-22T11:46:18Z"
}]

这是组件代码：

import { Component, OnInit } from '@angular/core';
import  *  as  data  from  '../data.json';
@Component({
  selector: 'app-tasks',
  templateUrl: './tasks.component.html',
  styleUrls: ['./tasks.component.css']
})
export class TasksComponent implements OnInit {

  mockData: any  = (data  as  any).default;

  show: boolean = false;
  value: string;
  id: number;


  constructor() {}


  remove(id) {
    this.mockData = this.mockData.filter(item => {
      if (item.id !== id) {
        return item;
      }
    });
  }

  create(item) {
    this.mockData.push({
      id: Date.now(),
      title: item,
      done: false,
      date: new Date()
    });
  }

  update(title) {
    this.mockData.map(item => {
      if (item.id === this.id) {
        item['title'] = title;
      }
    });

    this.show = false;
  }

  edit(id, title) {
    this.show = true;
    this.value = title;
    this.id = id;
  }

  setTaskComplete(id) {
    this.mockData.map(item => {
      if (item.id === id) {
        item['done'] = true;
      }
    });
  }

  ngOnInit() {
  }

}