angular完整小作品

上下列表切换，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)
  }

}