下面看一下如何删除一个计划，这里主要用到的是事件的绑定。

首先定义删除事件处理函数。在/src/app/plan-list/plan-list.component.ts添加如下事件处理函数

// 删除计划 deletePlan (plan) { this.planService.deletePlan(plan.id); this.plans = this.planService.getPlans(); }

在模板中绑定这个事件处理函数

这样你可以点击叉叉删除计划了

9. 创建一个管道来格式化我们的日期

同样的数据在前端的显示可能要求不同，这时需要我们对数据进行一些格式化，管道这种东西是你的首选。

按如下操作创建初始化管道

观察文件变化和app.module的变化

修改我们的/home/yibingxiong/ng-plan/src/app/pipe/data-format.pipe.ts如下

import { Pipe, PipeTransform } from '@angular/core'; @Pipe({ name: 'dataFormat' }) export class DataFormatPipe implements PipeTransform { transform(value: number): String { const d = new Date(); d.setTime(value); const year = d.getFullYear(); const month = d.getMonth() + 1; const date = d.getDate(); const h = d.getHours(); const m = d.getMinutes(); const s = d.getSeconds(); return (year + '-' + (month < 10 ? ('0' + month) : month) + '-' + (date < 10 ? ('0' + date) : date) + ' ' + (h < 10 ? ('0' + h) : h) + ':' + (m < 10 ? ('0' + m) : m) + ':' + (s < 10 ? ('0' + s) : s)); } }

使用我们的管道，如图所示

10. 为我们的planservice添加一个计算总是长的方法

在app.component中使用

但是会法现一个问题，当删除计划时总时长没有响应变化，下面设法解决这个问题。

11. 用service做一个共享的数据状态