上下列表切换,enter添加
根模块中引入必要信息
html文件
<input type="text" [(ngModel)]='username' (keydown)='addData($event)'>
<hr>
<h2>正在进行</h2>
<ul>
<li *ngFor = 'let item of list; let key = index;' [hidden]="item.status==1">
<button (click)='changeStatus(key,2)'>改变数据状态</button>{{item.status}}---{{item.username}}-------<button (click)='deletData(key)'>删除-</button>
</li>
</ul>
<h2>已经完成</h2>
<ul>
<li *ngFor = 'let item of list; let key = index;' [hidden]="item.status==2">
<button (click)='changeStatus(key,1)'>改变数据状态</button>{{item.status}}---{{item.username}}-------<button (click)='deletData(key)'>删除-</button>
</li>
</ul>
component.ts文件
import { Component, OnInit } from '@angular/core';
import { StorageService } from './../../services/storage.service'; /*引入服务*/
@Component({
selector: 'app-todolist',
templateUrl: './todolist.component.html',
styleUrls: ['./todolist.component.css']
})
export class TodolistComponent implements OnInit {
// storage = new StorageService() /*可以引入服务 官方不推荐*/
public username:any;
public list = [];
// private storage: StorageService 依赖注入服务
constructor( private storage: StorageService) {
// this.username = ''
console.log(this.storage);
// this.storage.setItem('username', '张三')
alert(this.storage.getItem('username'))
}
ngOnInit() {
//每次刷新获取storage里面todolist的值
var todolist = this.storage.getItem('todolist') //判断其不为空,否则不能使用push
if(todolist){
this.list = todolist
}
}
addData(e){
// alert(this.username); //双向数据绑定,获取文本框内容
if(e.keyCode==13){
var obj = { /*每次增加的一个对象数据*/
username:this.username,
status:1
}
var todolist = this.storage.getItem('todolist')
if(todolist){
todolist.push(obj)
//若有数据,则将该数据与原有storage数据拼接,重新写入
this.storage.setItem('todolist', todolist)
} else {
//若无数据,直接给storage写入数据
var arr = []
arr.push(obj)
this.storage.setItem('todolist', arr)
}
this.list.push(obj)
this.username = ''
}
}
deletData(key){
// alert(key)
this.list.splice(key,1)//删除数组的数据
}
changeStatus(key,status){
this.list[key].status = status
//改变状态后同时存入localstorage
this.storage.setItem('todolist', this.list)
}
}
service.ts保存在本地文件
import { Injectable } from '@angular/core';
@Injectable()
export class StorageService {
constructor() { }
setItem(key, value){
localStorage.setItem(key, JSON.stringify(value))
}
getItem(key){
return JSON.parse(localStorage.getItem(key))
}
removeItem(key){
localStorage.removeItem(key)
}
}