todo组件

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

命令行输入:ng g c todo

得到

Angular待办事项应用2-LMLPHP

文件结构

Angular待办事项应用2-LMLPHP

修改默认路由为todo:

Angular待办事项应用2-LMLPHP

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

Angular待办事项应用2-LMLPHP

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方法

Angular待办事项应用2-LMLPHP

然后修改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/,在输入框输入,然后回车,即可看到效果

Angular待办事项应用2-LMLPHP

ok,暂且到这里

未完待续。。。

05-06 07:52