上下列表切换，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')  //判断其不为空，否则不能使用pushif(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//改变状态后同时存入localstoragethis.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)}}