用angluar4.X写代办事项功能2018-07-12

注意app.module.ts注入：import { FormsModule } from '@angular/forms';

imports: [FormsModule, ],

.html

<input type="text"  [(ngModel)]='username' (keydown)="keyDown($event)"  />

<button (click)="addData()">添加</button>

<h2>未完成事项</h2>

<ul>

    <li *ngFor="let item of ulList;let i=index" [hidden]="item.status==1">

        <button (click)="changeData(i,1)">改变状态</button>

        {{item.status}}-{{item.username}}

        <button (click)="deleteData(i)">删除</button>

    </li>

</ul>

<h2>已完成事项</h2>

<ul>

    <li *ngFor="let item of ulList;let i=index" [hidden]="item.status==0">

        <button (click)="changeData(i,0)">改变状态</button>

        {{item.status}}-{{item.username}}

        <button (click)="deleteData(i)">删除</button>

    </li>

<ul>

.ts

public username:any='';

 public ulList=[];

// 点击添加数据

  addData(){

      //0为未完成状态

      //1为完成状态

      let obj={

        username:this.username,

        status:0,

      }

      this.ulList.push(obj);

      this.username='';

  }

//删除数据

  deleteData(i){

    this.ulList.splice(i,1);

  }

  //改变状态 

  changeData(i,status){

    this.ulList[i].status=status

  }