angular简单示例—待办事项清单—事件，双向绑定，实现数据缓存

一、待办事项实现功能：

• 添加事项
• 显示待办事项和已完成事项及实现相应的功能
• 可以删除事项

二、具体实现代码实现步骤如下：

1、首先，进行Angular环境的搭建和项目创建

ctrl + c 结束服务

2、新建模块

终端输入：

ng g component components/doList

3、编辑app.component.html

<!-- 引入doList组件 -->
<app-do-list></app-do-list>

4、app.modules.ts引入双向绑定模块

5、编辑do-list.component.ts

import { Component, OnInit } from '@angular/core';@Component({selector: 'app-do-list',templateUrl: './do-list.component.html',styleUrls: ['./do-list.component.css']
})
export class DoListComponent implements OnInit {constructor() { }ngOnInit(): void {}public keyword:string='';public toDoList:any[]=[];add(e:any){if(this.keyword==""){return}if (e.keyCode==13){ //键盘码13 表示的是回车键if (this.judgeRepeat(this.toDoList,this.keyword)){alert(this.keyword+"该事项已经存在！");}else{this.toDoList.push({title:this.keyword,    //待办事项名称flag:false              //待办事情完成标记：true表示已完成，false表示未完成    });}this.keyword="";console.log(this.keyword);}}//删除事项deleteToDo(index:number){this.toDoList.splice(index,1)}//判断事项是否重复，如果重复，则不再添加，否则添加judgeRepeat(toDoList:any[],keyword:string){for(var i=0;i<toDoList.length;i++){if(toDoList[i].title==keyword){return true;}}return false;}
}

6、编辑do-list.component.html

<h1>待办事项清单演示</h1>
<span>请输入您要添加的事项   <input type="text" (keyup)="add($event)" [(ngModel)]="keyword"/></span>
<p>_______________________________________________</p>
<h2>待办事项</h2>
<div><ul><li *ngFor="let item of toDoList;let key=index" [hidden]="item.flag"><input type="checkbox" [(ngModel)]="item.flag">{{item.title}}     <button (click)="deleteToDo(key)">X</button></li></ul>
</div>
<p>_______________________________________________</p>
<h2>已完成事项</h2>
<div><ul><li *ngFor="let item of toDoList;let key=index"  [hidden]="!item.flag"><input type="checkbox" [(ngModel)]="item.flag">{{item.title}}      <button (click)="deleteToDo(key)">X</button></li></ul>
</div>

7、启动服务 ，终端输入

ng serve --open

8、运行结果如图：请复制代码，自行尝试

三、angular 待办事项清单实现数据缓存

1、创建服务

ng g service services/cache

2、app.module.ts中引入创建的服务，并声明

3、在需要用到服务的组件里引入服务并初始化

4、编辑cache.service.ts，写入需要用到的方法

import { Injectable } from '@angular/core';@Injectable({providedIn: 'root'
})
export class CacheService {constructor() { }set(key:string,value:any){localStorage.setItem(key,JSON.stringify(value)); /*【localStorage.setItem(key,JSON.stringify(value))分析】【localSotrage解析】#含义在HTML5中，新加入了一个localStorage特性，这个特性主要是用来作为本地存储来使用的，解决了cookie存储空间不足的问题。#使用localStorage.getItem(key):获取指定key本地存储的值localStorage.setItem(key,value)：将value存储到key字段localStorage.removeItem(key)：从给定Storage对象中删除该键（如果存在）_________________________________________________________【JSON.stringify() 解析】将一个 JavaScript 对象或值转换为 JSON 字符串*/}get(key:string){return JSON.parse(localStorage.getItem(key)||'');}remove(key:string){localStorage.removeItem(key);}
}

5、编辑do-list.component.ts

import { Component, OnInit } from '@angular/core';//引入服务-------------------------------------------------------------------------------------------新加1
import {CacheService} from '../../services/cache.service';@Component({selector: 'app-do-list',templateUrl: './do-list.component.html',styleUrls: ['./do-list.component.css']
})
export class DoListComponent implements OnInit {//初始化服务------------------------------------------------------------------------------------------新加2constructor(public cache:CacheService) {} ngOnInit(): void {//页面刷新时，将缓存数据重新赋值给当前变量------------------------------------------------------------------新加4：实现缓存数据重新被读取console.log('页面刷新，缓存数据依然存在');var data:any =this.cache.get("toDoList");if (data!=null){this.toDoList=data;}}public keyword:string='';public toDoList:any[]=[];add(e:any){if(this.keyword==""){return}if (e.keyCode==13){ //键盘码13 表示的是回车键if (this.judgeRepeat(this.toDoList,this.keyword)){alert(this.keyword+"该事项已经存在！");}else{this.toDoList.push({title:this.keyword,    //待办事项名称flag:false              //待办事情完成标记：true表示已完成，false表示未完成    });//操作服务缓存中的数据---------------------------------------------------------------------------------新加3：实现数据保存至缓存this.cache.set("toDoList",this.toDoList); }this.keyword="";console.log(this.keyword);}}//删除事项deleteToDo(index:number){this.toDoList.splice(index,1)//操作服务缓存中的数据-------------------------------------------------------------------------------------新加5：实现数据缓存可删除this.cache.set("toDoList",this.toDoList);}//判断事项是否重复，如果重复，则不再添加，否则添加judgeRepeat(toDoList:any[],keyword:string){for(var i=0;i<toDoList.length;i++){if(toDoList[i].title==keyword){return true;}}return false;}//写入新方法-------------------------------------------------------------------------------------------------新加6：实现flag缓存数据可更新flagChange(){this.cache.set("toDoList",this.toDoList)}
}

6、编辑do-list.component.html

checkbox类型新增change事件

<h1>待办事项清单演示</h1>
<span>请输入您要添加的事项   <input type="text" (keyup)="add($event)" [(ngModel)]="keyword"/></span>
<p>_______________________________________________</p>
<h2>待办事项</h2>
<div><ul><li *ngFor="let item of toDoList;let key=index" [hidden]="item.flag"><input type="checkbox" [(ngModel)]="item.flag" (change)="flagChange()">{{item.title}}     <button (click)="deleteToDo(key)">X</button></li></ul>
</div>
<p>_______________________________________________</p>
<h2>已完成事项</h2>
<div><ul><li *ngFor="let item of toDoList;let key=index"  [hidden]="!item.flag"><input type="checkbox" [(ngModel)]="item.flag" (change)="flagChange()">{{item.title}}      <button (click)="deleteToDo(key)">X</button></li></ul>
</div>

7、运行结果如图，请复制代码，自行尝试