1. html代码

<input type="text" [(ngModel)]="thing"/><button (click)="add()">新增</button>

<h2>待办列表</h2>
<ul>
  <li *ngFor="let item of list;let i=index" [hidden]="item.status==1">
    <button (click)="change(i,1)">标记</button>{{item.name}}<button (click)="del(i)">删除</button>
  </li>
</ul>
<br>
<hr>
<br>
<h2>已完成列表</h2>
<ul>
  <li *ngFor="let item of list;let i=index" [hidden]="item.status==0">
    <button (click)="change(i,0)">撤销标记</button>{{item.name}}<button (click)="del(i)">删除</button>
  </li>
</ul>

2. ts代码

list=[];
  thing="";
  constructor() { }

  ngOnInit() {
  }

  add(){
    var obj={"name":this.thing,"status":0};
    this.list.push(obj);
    this.thing="";
  }

  del(key){
    this.list.splice(key,1);
  }

  change(key,status){
    this.list[key].status=status;
  }

3 数据缓存，在第3节用service实现