demo:todolist,使用服务创建公共函数,并进行数据本地化存储
待解决:checkbox进行双向绑定的时候如如指定值?不局限于true和false?
涉及知识点:
- 数组操作:unshift向数组头部添加,push尾部追加
- 删除数组元素:todoList.splice(index,1),从索引index处开始,删除1个元素
- loclaStorage进行浏览器本地存储:localStorage.setItem(key,JSON.stringify(value));
- 服务:组件中可以调用服务中的函数,反过来则不行
1.创建服务组件
ng g service services/storage
2.app.module.ts 里面引入创建的服务
import { NgModule } from '@angular/core'; // 实现表单元素的双向数据绑定
// 引入创建的服务
import { StorageService } from './services/storage.service';
@NgModule({
declarations: [
AppComponent,
FormComponent,
],
imports: [
BrowserModule,
FormsModule, // 引入
],
providers: [StorageService,], // 依赖注入服务
})
3.在服务中定义公共的函数:storage.service.ts
import { Injectable } from '@angular/core';
@Injectable({
providedIn: 'root'
})
export class StorageService {
constructor() { }
set(key:string,value:any){
// 存入浏览器的localStorage
localStorage.setItem(key,JSON.stringify(value));
};
get(key:string){
// 拿到的可能是json格式的对象
return JSON.parse(localStorage.getItem(key));
};
remove(key:string){
localStorage.removeItem(key);
};
}
4.todo-list.component.ts
import { Component, OnInit } from '@angular/core';
// 在组件中引入服务
import { StorageService } from '../../services/storage.service';
@Component({
selector: 'app-todo-list',
templateUrl: './todo-list.component.html',
styleUrls: ['./todo-list.component.css']
})
export class TodoListComponent implements OnInit {
public keyword: string;
public todoList: any[]=[];
// 在组件的构造器中注册服务
constructor(private storage: StorageService) { }
// 在初始化方法中读取localStorage
ngOnInit() {
var todoList:any=this.storage.get('todoList');
if(todoList){
this.todoList=todoList;
}
}
// 检查todoList中的task是否重复
checkRepeat(todoList: any,keyword: string){
for(var i=0;i<todoList.length;i++){
if(todoList[i].task==keyword){
return true
};
};
return false
}
// input框回车后添加task
doAdd(e: any) {
if(e.keyCode==13){
var isRepeat=this.checkRepeat(this.todoList,this.keyword)
if(isRepeat){
alert(this.keyword+"已存在");
}else{
this.todoList.unshift( // unshift向数组头部添加,push追加
{
"task": this.keyword,
"status": false,
}
);
this.storage.set('todoList',this.todoList);
}
this.keyword="";
console.log(this.todoList);
}
}
// 删除task
delTask(index: any){
this.todoList.splice(index,1)
this.storage.set('todoList',this.todoList);
}
checkboxChange(){
this.storage.set('todoList',this.todoList);
}
}
5.todo-list.component.html
<div>
<h1>todoList
<input type="text" class="form-input" [(ngModel)]="keyword" (keyup)="doAdd($event)">
</h1>
<hr>
<h3>代办事项</h3>
<!-- hidden属性:根据task的status决定是否隐藏 -->
<p *ngFor="let item of todoList;let key=index;" [hidden]="item.status">
<!-- checkbox进行双向绑定的时候如如指定值?不局限限于true和false? -->
<!-- checkbox绑定change事件,变更localStorage中的数据 -->
<input type="checkbox" [(ngModel)]="item.status" (change)="checkboxChange()">
{{item.task}} ------ <button (click)="delTask(key)">X</button>
</p>
<hr>
<h3>已完成事项</h3>
<p *ngFor="let item of todoList;let key=index;">
<!-- 一个标签中不能同时使用ngfor和ngif -->
<span *ngIf="item.status">
<input type="checkbox" [(ngModel)]="item.status" (change)="checkboxChange()">
{{item.task}} ------ <button (click)="delTask(key)">X</button>
</span>
</p>
</div>
6.效果
参考:https://www.bilibili.com/video/av59049211?from=search&seid=485997827014437418