【angular】TodoList小项目（已开源）

参考：https://segmentfault.com/a/1190000013519099

文章目录

    • 准备工作
    • header
    • Todo、Doing、Done
      • 样式（HTML+CSS）
      • 功能（TS）
        • 将输入框内容加入todoList（addTodo）
        • 将todo事件改到doing
      • 服务
    • 参考
    • 开源

效果：

在这里插入图片描述

准备工作

创建项目：ng new my-app

导航到workspace 文件夹：cd my-app

启动这个项目：ng serve --open

创建组件：ng generate component component/todoList

组件的路径是：
在这里插入图片描述

创建了组件后，要把它在根组件配置（app.module.ts）：

在这里插入图片描述
根据TS文件todo-list.component.ts，我们创建的todoList这个组件的名字叫做：app-todo-list。把组件引入到总页面中（app.component.html），启动服务看看。成功！到这里我们已经知道组件怎么创建和引用了。

在这里插入图片描述
接下来开始写TodoList！

header

效果：

在这里插入图片描述

<!-- todo-list.component.html -->
<header><section><label for="title">TodoList</label><input type="text" placeholder="添加ToDo"></section>
</header>

/* todo-list.component.css */
header {height: 70px;background-color: #333;
}header section{display: flex;justify-content: space-between;
}section {margin: 0 auto;width: 70vw;}header section label {font-size: 28px;color: #fff;line-height: 70px;
}header section input {width: 35%;margin: 10px 0;padding-left: 15px;border-radius: 10px;box-shadow: 0 1px 0 rgba(255,255,255,0.24), 0 1px 6px rgba(0,0,0,0.45) inset;
}

Todo、Doing、Done

样式（HTML+CSS）

效果大致是这样：

在这里插入图片描述
一些细节

复选框与文字对齐

参考：css复选框和文字对齐-CSDN博客
在这里插入图片描述

.item .listItem input[type=checkbox] {width: 23px;height: 23px;/* 复选框与文字对齐 */display: inline-block;vertical-align: middle;margin: 0 10px 2px;
}

给Done的item设置阴影

在item外面套一层mask，设置背景黑色。item设置opacity即可。

参考：css为图片添加一层蒙版_css给图片加一层蒙版-CSDN博客

<div class="item done"><h2>Done</h2><div class="list"><!-- 外面的阴影 --><div class="mask"><div class="listItem"><input type="checkbox">吃饭3</div>        </div></div>
</div>

.done .listItem {box-shadow: -5px 0 0 0 #999999;opacity: 0.7;
}.done .mask {background: #000;
}

最终代码

<!-- todo-list.component.html -->
<header><section><label for="title">TodoList</label><input type="text" placeholder="添加ToDo"></section>
</header><section><div class="item todo"><h2>Todo</h2><div class="list"><div class="listItem"><input type="checkbox">吃饭1</div><div class="listItem"><input type="checkbox">睡觉1</div><div class="listItem"><input type="checkbox">喝水1</div></div></div><div class="item doing"><h2>Doing</h2><div class="list"><div class="listItem"><input type="checkbox">吃饭2</div><div class="listItem"><input type="checkbox">睡觉2</div><div class="listItem"><input type="checkbox">喝水2</div></div></div><div class="item done"><h2>Done</h2><div class="list"><!-- 外面的阴影 --><div class="mask"><div class="listItem"><input type="checkbox" checked="checked">吃饭3</div>        </div></div></div>
</section>

/* todo-list.component.css */
header {height: 70px;background-color: #333;
}header section {display: flex;justify-content: space-between;
}section {margin: 0 auto;width: 70vw;}header section label {font-size: 28px;color: #fff;line-height: 70px;
}header section input {width: 35%;margin: 10px 0;padding-left: 15px;border-radius: 10px;box-shadow: 0 1px 0 rgba(255, 255, 255, 0.24), 0 1px 6px rgba(0, 0, 0, 0.45) inset;
}.item {margin: 20px 0;
}.item h2 {color: #000;font-size: 28px;font-weight: 700;margin-bottom: 20px;
}.item .listItem {background-color: #dbdbdb;margin: 15px 0;height: 40px;line-height: 40px;font-size: 16px;
}.todo .listItem {box-shadow: -5px 0 0 0 #ede719;
}.doing .listItem {box-shadow: -5px 0 0 0 yellowgreen;
}.done .listItem {box-shadow: -5px 0 0 0 #999999;opacity: 0.7;
}.done .mask {background: #000;
}.item .listItem input[type=checkbox] {width: 23px;height: 23px;/* 复选框与文字对齐 */display: inline-block;vertical-align: middle;margin: 0 10px 2px;
}

功能（TS）

将输入框内容加入todoList（addTodo）

定义数据，写addTodo方法。

//todo-list.component.ts
export class TodoListComponent {public todo: any = '' //在input栏，即将加入todoListpublic todoList = [] as any;public doingList = [] as any;public doneList = [] as any;// 添加代办时间到todoaddTodo(e: any) {// 回车if (e.keyCode == 13) {this.todoList.push(this.todo)this.todo = ''}}
}

在html中绑定数据和时间：

输入框：

<!-- todo-list.component.html -->
<header><section><label for="title">TodoList</label><input type="text" (keydown)="addTodo($event)" [(ngModel)]='todo' placeholder="添加ToDo"></section>
</header>

todoList：

<div class="item todo"><h2>Todo</h2><div class="list"><div class="listItem" *ngFor="let item of todoList"><input type="checkbox">{{item.todo}}</div></div>
</div>

遇到的问题与解决：

写addTodo方法：
TypeScript 错误 property does not exist on type Object - 掘金 (juejin.cn)
Parameter ‘xxx’ implicitly has an ‘any’ type的解决_implicitly has an ‘any’ type-CSDN博客

在绑定[(ngModel)]=‘todo’：解决Angular报错 Can’t bind to ‘ngModel’ since it isn’t a known property of ‘input’-CSDN博客

将todoObj push进todoList：类型“{ name: any； value: string； }”的参数不能赋给类型“never”的参数。_类型“any”的参数不能赋给类型“never”的参数_干饭了干饭了1的博客-CSDN博客

将todo事件改到doing

功能：todo打勾（点击事件），它就加到doingList中。doing到done、done到todo以此类推。

// todo 改为doing
todoChange(key: any) {this.doingList.push(this.todoList[key])this.todoList.splice(key,1)
}

<div class="item todo"><h2>Todo</h2><div class="list"><div class="listItem" *ngFor="let item of todoList;let key=index"><input type="checkbox" (click)="todoChange(key)">{{item}}</div></div>
</div>

刷新一下，发现页面中的数据都没了。如果想要保存页面数据，我们需要做以下操作。

服务

参考：angularcli 第七篇（service 服务） - 撑死的喵~ - 博客园 (cnblogs.com)

在控制台创建服务：

ng g service services/storage

app.module.ts中引入创建的服务：

在这里插入图片描述

在要使用的页面引入和注入服务：

在这里插入图片描述
具体服务：

可能的报错：ts报错:类型“string | null”的参数不能赋给类型“string”的参数。 不能将类型“null”分配给类型“string”。-CSDN博客

// storage.service.ts
import { Injectable } from '@angular/core';@Injectable({providedIn: 'root'
})
export class StorageService {constructor() { }setItem(key: any, value: any) {localStorage.setItem(key, JSON.stringify(value));}getItem(key: any) {return JSON.parse(localStorage.getItem(key) || '')}
}

在每个会修改todoList、doingList、doneList的代码下面加上对应的this.storage.setItem('xx',this.xx)，把数据存放在本地中。

// 添加代办时间到todo
addTodo(e: any) {// 回车if (e.keyCode == 13) {this.todoList.push(this.todo)this.todo = ''this.storage.setItem('todoList',this.todoList)}
}// todo 改为doing
todoChange(key: any) {this.doingList.push(this.todoList[key])this.todoList.splice(key,1)this.storage.setItem('todoList',this.todoList)this.storage.setItem('doingList',this.doingList)
}// doing 改为done
doingChange(key: any) {this.doneList.push(this.doingList[key])this.doingList.splice(key,1)this.storage.setItem('doneList',this.doneList)this.storage.setItem('doingList',this.doingList)
}// done 改为todo
doneChange(key: any) {this.todoList.push(this.doneList[key])this.doneList.splice(key,1)this.storage.setItem('todoList',this.todoList)this.storage.setItem('doneList',this.doneList)
}

大功告成！

参考

Angular - Angular 文档简介

angularjs - 和我一起入坑，Angular入门，Angular版的ToDoList - 个人文章 - SegmentFault 思否

css复选框和文字对齐-CSDN博客

box-shadow 设置单边、多边阴影 - 掘金 (juejin.cn)

css为图片添加一层蒙版_css给图片加一层蒙版-CSDN博客

js 键盘监听（回车）_js监听键盘回车-CSDN博客

TypeScript 错误 property does not exist on type Object - 掘金 (juejin.cn)

Parameter ‘xxx’ implicitly has an ‘any’ type的解决_implicitly has an ‘any’ type-CSDN博客

angularcli 第七篇（service 服务） - 撑死的喵~ - 博客园 (cnblogs.com)

ts报错:类型“string | null”的参数不能赋给类型“string”的参数。 不能将类型“null”分配给类型“string”。-CSDN博客

开源

https://gitee.com/karshey/angular-todo-list

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.hqwc.cn/news/130845.html

如若内容造成侵权/违法违规/事实不符，请联系编程知识网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

原生JS-鼠标拖动

原生JS-鼠标拖动

原生JS-鼠标拖动 通过鼠标的点击事件通过h5的属性 通过鼠标的点击事件 步骤&#xff1a; 1. 鼠标按下div。 2. 鼠标移动&#xff0c;div跟着移动 原生js&#xff0c;实现拖拽效果。1. 给被拖拽的div加上 onmousedown 鼠标【按下事件】。鼠标按下的时候&#xff0c;开始监听鼠标…
阅读更多...
YOLOv3 | 核心主干网络，特征图解码，多类损失函数详解

YOLOv3 | 核心主干网络，特征图解码，多类损失函数详解

https://zhuanlan.zhihu.com/p/76802514) 文章目录 1. 核心改进1.1主干网络1.2 特征图解码1.2.1 检测框&#xff08;位置&#xff0c;宽高&#xff09;解码1.2.2 检测置信度解码1.2.3 类别解码 1.3 训练损失函数1.3.1 正负样本定义1.3.2 损失函数 1. 核心改进 1.1主干网络 更…
阅读更多...
Python操作Hive数据仓库

Python操作Hive数据仓库

Python连接Hive 1、Python如何连接Hive&#xff1f;2、Python连接Hive数据仓库 1、Python如何连接Hive&#xff1f; Python连接Hive需要使用Impala查询引擎 由于Hadoop集群节点间使用RPC通信&#xff0c;所以需要配置Thrift依赖环境 Thrift是一个轻量级、跨语言的RPC框架&…
阅读更多...
【AI视野·今日Sound 声学论文速览 第二十一期】Mon, 9 Oct 2023

【AI视野·今日Sound 声学论文速览 第二十一期】Mon, 9 Oct 2023

AI视野今日CS.Sound 声学论文速览 Mon, 9 Oct 2023 Totally 13 papers &#x1f449;上期速览✈更多精彩请移步主页 Interesting: &#x1f4da;MBTFNet,用于歌声质量增强的多带宽时频神经网络 (from 西工大 Audio, Speech and Language Processing Group (ASLPNPU),) Daily…
阅读更多...
go语言教程4：switch和map

go语言教程4：switch和map

文章目录 switchswitch匹配字典 go语言教程&#xff1a;安装入门➡️for循环➡️数组、切片和指针 switch和map&#xff0c;一个是控制流&#xff0c;一个是数据结构&#xff0c;之所以把两个不同类型的知识点放在一起讲解&#xff0c;是因为二者有着极其相似的运行逻辑&#…
阅读更多...
linux下安装ffmpeg的详细教程、ffmpeg is not installed

linux下安装ffmpeg的详细教程、ffmpeg is not installed

1、下载解压 wget http://www.ffmpeg.org/releases/ffmpeg-6.0.tar.gz tar -zxvf ffmpeg-6.0.tar.gz 2、 进入解压后目录,输入如下命令/usr/local/ffmpeg为自己指定的安装目录 cd ffmpeg-6.0 ./configure --prefix/usr/local/ffmpeg make sudo make install 3、配置变量 v…
阅读更多...
神经网络(MLP多层感知器)

神经网络(MLP多层感知器)

分类 神经网络可以分为多种不同的类型&#xff0c;下面列举一些常见的神经网络类型&#xff1a; 前馈神经网络&#xff08;Feedforward Neural Network&#xff09;&#xff1a;前馈神经网络是最基本的神经网络类型&#xff0c;也是深度学习中最常见的神经网络类型。它由若干个…
阅读更多...
IDEA使用模板创建webapp时，web.xml文件版本过低的一种解决方法

IDEA使用模板创建webapp时，web.xml文件版本过低的一种解决方法

创建完成后的web.xml 文件&#xff0c;版本太低 <!DOCTYPE web-app PUBLIC"-//Sun Microsystems, Inc.//DTD Web Application 2.3//EN""http://java.sun.com/dtd/web-app_2_3.dtd" ><web-app><display-name>Archetype Created Web Appl…
阅读更多...
Unity设计模式——模板模式

Unity设计模式——模板模式

模板方法模式&#xff0c;定义一个操作中的算法的骨架&#xff0c;而将一些步骤延迟到子类中。模板方法使得 子类可以不改变一个算法的结构即可重定义该算法的某些特定步骤。 Abstract Class 是抽象类&#xff0c;其实也就是一抽象模板&#xff0c;定义并实现了一个模版方法。这…
阅读更多...
主从Reactor高并发服务器

主从Reactor高并发服务器

文章目录 Reactor模型的典型分类单Reactor单线程单Reactor多线程多Reactor多线程本项目中实现的主从Reactor One Thread One Loop各模型的优点与缺点 项目分解Reactor服务器模块BufferSocketChannelEpollerTimerWheelEventLoopAnyConnectionAcceptorLoopThreadLoopThreadPoolTc…
阅读更多...
嵌入式Linux裸机开发（五）中断管理

嵌入式Linux裸机开发（五）中断管理

系列文章目录 文章目录 系列文章目录前言STM32 中断系统IMX6U中断控制8个中断GIC中断控制器GIC介绍中断IDGIC逻辑分块GIC协处理器 中断使能中断优先级 重点代码分析官方SDK函数start.S文件自行编写中断驱动文件 前言 最近在学习中发现&#xff0c;学Linux嵌入式不仅是对Linux的…
阅读更多...
c语言终点站--文件操作

c语言终点站--文件操作

前言&#xff1a; 为什么要学习文件操作呢&#xff1f;想要知道这个问题&#xff0c;我们就需要先了解什么是数据的可持久化。 那么什么是数据的可持久化呢&#xff1f;数据的可持久化就是把内存中的数据对象永久的保存在电脑的磁盘文件中&#xff0c;将程序数据在持久状态和…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023