angular备忘录的实现

NK
247 阅读4分钟

最终效果图

image.png 实现功能：
1.在输入框中输入需要完成的事项，回车后添加事项到待办事项；
2.在每个事项的前面有个复选框可以用来勾选，未勾选的时候是待办事项，勾选后是已完成事项；
3.在每个事项的后面有一个按钮可以用于删除这个事项；
4.设置一点点样式让页面不是特别难看，左边是事项内容，右边是事项删除按钮。
5.刷新页面，待办事项和已完成事项不会消失。

创建组件与服务并启动项目

创建组件todoList

这个demo在angular手脚架里面进行搭建的，因此我们仍然使用angular完成这个demo。第一步就是创建组件并运行。components/todoList是创建生成的路径。

ng g component components/todoList

image.png

创建服务

服务可以实现了方法的共享。 终端命令输入

ng g service services/storage

image.png

在app.module.ts引入以及配置服务 在app.module.ts加入一下一句

import { StorageService } from './services/storage.service';

将providers: [],语句改为

providers: [StorageService],

然后在需要引用服务的组件（即todo-list.component.ts文件）加入引用语句，这里的路径按照实际路径写。

import { StorageService } from '../../services/storage.service';

在constructor中进行初始化，参数列表中引入public storage: StorageService

constructor(public storage: StorageService) { }

运行项目

运行以下命令，等待几秒后浏览器自动打开页面

ng serve --open

image.png

输入框

这里的输入框用上angular的双向绑定 [(ngModel)]，绑定的值是keyWord。再给他一个回车事件(keyup)="doAdd($event)。

 <input type="text" [(ngModel)]="keyWord" (keyup)="doAdd($event)">

数据可持续化服务

在storage.service.ts文件中，写一个set函数用于把数据写进缓存中，get函数把缓存里面的数据读出来。

setItem基础用法： window.localStorage.setItem(key,value);//设置指定key的数据（JSON格式）

对这个函数比较感兴趣的同学可以参考这篇文章：window.localStorage.setItem的理解与使用

set(key:string,value:any){
    localStorage.setItem(key,JSON.stringify(value))
}
get(key:string) {
    let  temp = localStorage.getItem(key)
    let str:string;    
    if(temp){
      str = temp;
    }else{
      str = '[]'
    }
    return JSON.parse(str);
}

在页面声明周期初始化时，读取缓存。todo-list.component.ts文件中ngOnInit()函数里面进行读取缓存。

ngOnInit(): void {
    let todolist = this.storage.get('todolist');
    if (todolist) {
      this.todoList = todolist;
    }
}

输入框

页面代码

todo-list.component.html文件中，这里用双向绑定对输入值keyWord进行绑定，添加回车事件doAdd($event)。

   <input type="text" [(ngModel)]="keyWord" (keyup)="doAdd($event)">

TS代码

todo-list.component.ts文件中，需要对keyWord属性进行定义，因为这些事项需要进行渲染，所以建立一个数组存储这些事项。

public keyWord: string = "";
public todoList: any[] = [];

用if (e.keyCode == 13) 这句代码的意思是，按下回车后把输入的内容进行处理。处理的过程首先是对输入的内容进行判断，校验输入的这个内容是否在事项列表中，如果存在就进行提示，如果不存在将这个事项附上初始状态0添加到事项列表中。添加到事项列表的这个数据是一个对象，里面包括事项名称和它的初始状态码。添加完成事项后将输入框内容清空。随后进行数据可持续操作。

doAdd(e: any) {    
    if (e.keyCode == 13) {
      if (!this.todoListHasKeyword(this.todoList, this.keyWord)) {
        this.todoList.push({
          title: this.keyWord,
          status: 0,
        });
        this.keyWord = ''
        // 数据可持续化
        this.storage.set('todolist',this.todoList)
      }else{
        alert('数据已经存在！')
      }     
    }
}

对于这个校验单独拎出来写个todoListHasKeyword函数。传入事项列表与事项，返回这个新的事项是否在事项列表中存在。逻辑比较简单，遍历事项列表，如果列表中有就返回true，没有就返回false。

todoListHasKeyword(todoList: any, keyWord: any): boolean {
    for (let item of todoList) {
      if (item.title == keyWord) {
        return true;
      }
    }
    return false;
}

待办事项与已完成事项

页面代码

这个待办事项与已完成事项本质其实是一样的，是对事项列表进行循环选择性展示。
对列表进行循环：*ngFor="let item of todoList;let key = index"
对列表事项选择性展示：[hidden]="item.status == 1"；当他们的状态码为1的时候进行隐藏。
对事项状态通过复选框进行改变：[(ngModel)]="item.status",与此同时加上一个改变事件的监视：(change)="changeData()" ，这是为了及时更新缓存。
按钮绑定事件进行删除：<button (click)="delData(key)">del

<h3>待办事项</h3>
<ul>
    <li *ngFor="let item of todoList;let key = index" [hidden]="item.status == 1">
        <input type="checkbox" name="" id="" [(ngModel)]="item.status" (change)="changeData()" >
        {{item.title}}   <button (click)="delData(key)">del</button> 
    </li>
</ul>
<h3>已完成事项</h3>
<ul>
    <li *ngFor="let item of todoList;let key = index" [hidden]="item.status == 0">
        <input type="checkbox" name="" id="" [(ngModel)]="item.status" >
        {{item.title}}  <button (click)="delData(key)">del</button> 
    </li>
</ul>

TS代码

删除函数： 这两行代码第一行是对事项在事项列表中进行删除，第二行是把数据写入缓存中。

  delData(key: number) {
    this.todoList.splice(key, 1)
    this.storage.set('todolist',this.todoList)
  }

修改函数：对缓存中的数据进行更新。

  changeData(){
    this.storage.set('todolist',this.todoList)    
  }

查看缓存

按“F12“是进入开发者工具 image.png

avatar
文章
阅读
粉丝