>html ~~~ <p>todolist works!</p> <div style="text-align: center"> <input type="text" [(ngModel)]="keywords" (keyup)="searchActionEnter($event)"> <button (click)="searchAction()">搜索</button> </div> <h3>列表</h3> <ul> <li *ngFor="let item of history;let k=index"> <input type="checkbox" (click)="doneList(k)" /> {{item}} --- <span style="color: red" (click)="delete(k)">[x]</span> </li> </ul> <h3>已完成</h3> <ul> <li *ngFor="let item of doneHistory"> {{item}} </li> </ul> ~~~ >component.ts ~~~ import { Component, OnInit } from '@angular/core'; @Component({ selector: 'app-todolist', templateUrl: './todolist.component.html', styleUrls: ['./todolist.component.css'] }) export class TodolistComponent implements OnInit { constructor() { } ngOnInit(): void { } public keywords:string; public history:Array<string>=[]; searchAction():void { this.saveHistory(); } searchActionEnter(e):void{ if(e.keyCode==13){ this.saveHistory(); } } private saveHistory():void { if(this.history.indexOf(this.keywords)!=-1){ alert(this.keywords+"已经存在"); return; } this.history.push(this.keywords); this.keywords=''; } delete(index):void{ this.history.splice(index,1); } public doneHistory:Array<string>=[]; doneList(index):void{ this.doneHistory.push(this.history[index]); this.delete(index); } } ~~~