Angular 实现一个 toDoList：表单事件+服务+数据持久化

效果动态图：

两种方法：
第一种：代码量多一协，易懂

<div class="wrap">
    <input type="text" [(ngModel)]="word"><button (click)="add()">搜索</button><br>
    代办事项：
    <ul> 
       
        <li *ngFor="let item of agency;let key=index;" >
            <input type="button" (click)="doFinish(item,key)"> 
            {{item}}===<button (click)="doDeleteAgency(key)">删除</button>
        </li>
    </ul>
    完成事项：
    <ul>

        <li *ngFor="let item of complete;let key=index">
            <input type="button" (click)="notStarted(item,key)"> 
            {{item}}===<button (click)="doDeleteFinish(key)">删除</button>
        </li>
    </ul>
</div>

import { Component, OnInit } from '@angular/core';
//服务
import { StorageService } from '../../services/storage.service';
@Component({
  selector: 'app-text03',
  templateUrl: './text03.component.html',
  styleUrls: ['./text03.component.css']
})
export class Text03Component implements OnInit {
word:string='';
agency:any[]=[];//代办事项
complete:any[]=[];//完成事项
constructor(public storage:StorageService) {//服务
}
  ngOnInit(): void {
    //刷新页面时，就执行其中的内容，判断本地缓存中的completelist、 agencylist两个列表是否有东西
    let completelist:any=this.storage.get('completelist');
    let agencylist:any=this.storage.get('anencylist');
   if(completelist){
     this.complete=completelist;
   }
   if(agencylist){
    this.agency=agencylist;
  }
  }
  // 搜索按钮，增加一条信息到待办事项，同时记得保存本地缓存中的completelist、 agencylist两个列表的内容
  add(){
    if((this.agency.indexOf(this.word)==-1)&&(!(this.word==''))){//如果代办事项中没有这个词条就添加
      this.agency.push(this.word);
      this.storage.set('agencylist',this.agency)
      this.storage.set('completelist',this.complete)
      this.word='';
    }
  }
  //代办事项点击函数，变成完成事项
  doFinish(item:string,key:any){
//首先要把这条数据加到已完成列表，再将这条数据删除；保存两个列表是因为来个列表都改变了。
this.complete.push(item);
this.agency.splice(key,1);
this.storage.set('agencylist',this.agency)
this.storage.set('completelist',this.complete)
  }
  // 完成事项点击函数，变成代办事项
  notStarted(item:string,key:any){
    this.agency.push(item);
    this.complete.splice(key,1);
    this.storage.set('completelist',this.complete)
    this.storage.set('agencylist',this.agency)
  }
  // 删除代办事项的某条信息，然后再保存待办事项的列表
  doDeleteAgency(key:any){
    this.agency.splice(key,1);
    this.storage.set('agencylist',this.agency)
  }
    // 删除完成事项的某条信息，然后再保存完成事项的列表
  doDeleteFinish(key:any){
    this.complete.splice(key,1);
    this.storage.set('completelist',this.complete)
  }
 
}

第二种：代码量少一些，稍难

<div class="wrap">
    <input type="text" [(ngModel)]="word" (keyup)="add($event)"><br>
    代办事项：
    <ul> 
       
        <li *ngFor="let item of agency;let key=index;"[hidden]="item.status==1" (change)="statusChange()">
            <input type="checkbox" [(ngModel)]="item.status"> 
            {{item.title}} ------ <button (click)="deleteData(key)">X</button>
        </li>
    </ul>
    完成事项：
    <ul> 
       
        <li *ngFor="let item of agency;let key=index;"[hidden]="item.status==0" (change)="statusChange()">
            <input type="checkbox" [(ngModel)]="item.status"> 
            {{item.title}} ------ <button (click)="deleteData(key)">X</button>
        </li>
    </ul>
</div>

import { Component, OnInit } from '@angular/core';
import 
@Component({
  selector: 'app-text03',
  templateUrl: './text03.component.html',
  styleUrls: ['./text03.component.css']
})
export class Text03Component implements OnInit {
word:string='';
agency:any[]=[];//所有事项都在其中，通过status判断是代办还是已完成
 constructor(public storage:StorageService) {
   }
   ngOnInit(): void {
    var todolist=this.storage.get('todolist');
    if(todolist){
      this.agency=todolist;
    }
  }
  //增加到代办事项中
  add(e:any){
    if(e.keyCode==13){
      if(!this.doAdd(this.agency,this.word)&&(!(this.word==''))){
           this.agency.push({
             title:this.word,
             status:0
           })
           this.storage.set('todolist',this.agency);
           this.word='';
      }else{
        this.word='';
      }
    }
  }
  // 循环数组中的数据，判断是否已存在
  doAdd(agency:any,word:any){
     for(let i=0;i<agency.length;i++){
       if(agency[i].title==word){
         return true;
       }
     }
     return false;
  }
  deleteData(key:number){
    this.agency.splice(key,1);
    this.storage.set('todolist',this.agency);
  }
  statusChange(){
    this.storage.set('todolist',this.agency);
  }
}