带时间戳的角度6切换按钮

Question

所以我有这个切换按钮输出一个时间戳，但是它并不能完全按照我想要的方式工作，因为我希望它在切换时为时间戳，而在“取消切换”时再次为时间戳。现在，我得到两个带有一个切换的时间戳。看到这里：

import { Component } from '@angular/core';

interface TimeStamp {
  startTime: Date;
  stopTime: Date;
}

@Component({
  selector: 'app-root',
  template: `
    <h1>Punch it</h1>
    <toggle-button class="toggle-button"
    (click)="handle()"
      (changed)="checked=$event">
    </toggle-button>
    <p>Your are {{checked ? 'PUNCHED IN' : 'PUNCHED OUT'}}.</p>

    <button (click)="handle()">Stamp</button>

    <p>start : {{timeStamp.startTime|date:'HH:mm:ss.SSS'}}</p>
    <p>Stop: {{timeStamp.stopTime|date:'HH:mm:ss.SSS'}}</p>
  `,


  styles: [ `
    h1 {
      color: #DB5B33;
      font-weight: 300;
      text-align: center;
    }

    .toggle-button {
      margin: 0 auto;
    } 
  `]
})
export class PunchComponent  {
  checked: boolean;
  timeStamp: TimeStamp 

  constructor() { }

  ngOnInit() {
  }

  handle() {
    if (!this.timeStamp) {
      this.timeStamp = {
        startTime: new Date(),
        stopTime: undefined
      }
    } else {
      this.timeStamp.stopTime = new Date()
    }

  }
}

我想拥有的是： 1.切换： 时间戳A 2.切换： 时间戳B

理想情况：

1. 切换： 时间戳C
2. 切换： 时间戳D

，依此类推。

任何帮助表示赞赏。