Angular待办事项应用2

todo组件

接上一篇，在根目录创建todo组件

命令行输入：ng g c todo

得到

文件结构

修改默认路由为todo：

然后打开浏览器：http://localhost:4200/ ，查看，todo组件已经ok

todo实体类

我们希望todo页面有一个输入待办事项的输入框，一个显示待办事项的状态列表

首先定义todo的结构

id：主键，唯一

desc：描述

completed：是否完成

然后在todo文件夹新建一个文件todo.model.ts

export class Todo {

    id:number;

    desc:string;

    completed:boolean;

}

　　

然后我们改造一下todo组件

在todo.component.ts中，引入Todo实体对象，增加一个addTodo方法

然后修改todo.component.html

<p>

  todo works!

</p>

<div>

  <input type="text" [(ngModel)]="desc" (keyup.enter)="addTodo()" />

  <ul>

    <li *ngFor="let todo of todos">{{todo.desc}}</li>

  </ul>

</div>

　　

保存，打开浏览器查看：http://localhost:4200/，在输入框输入，然后回车，即可看到效果

ok，暂且到这里

未完待续。。。