Angular 按日期对项目进行分组

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

今天
做作业/2019年11月27日
跑步/2019年11月27日

昨天
吃西红柿/2019年11月26日
喝牛奶/2019年11月26日

旧任务
任务1/20.11.2019
任务2/20.11.2019 等

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>

以下是组件代码：

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() {
  }

}

---

什么管子坏了？我在代码中没有看到任何对数据进行分组的管道。此外，Angular建议在组件中对数据进行分组：我尝试了orderBy管道和ngIf，以仅显示item.date==26/11/19的对象，但由于某些原因两者都不起作用。最重要的是，结果需要按天分组，而不仅仅是按asc或desc排序。数据分组应该在组件中完成，而不是在HTML中完成

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() {
  }

}