关于angular 8.1使用过程中的一些记录


Posted in Javascript onNovember 25, 2020

说起来已经使用了大概一年半的angular,大概已经渐渐习惯了这个前端框架吧,但是具体的原理和底层的代码都没有仔细的看过。

前阵子以前做的一个项目有了新的需求,而且比较麻烦,讲讲做的过程中遇到的一些问题

首先是勾选状态的保持问题

关于angular 8.1使用过程中的一些记录

在模板中思考了很久,用了各种方法,修改传入值,页码改变以后勾选状态就是会有奇怪的问题,比如在代码里明明把选中的给去掉了,但是页面上还是勾选状态,最后折腾来折腾去,发觉操作的对象不对:页面上的是模板里面的list,就是listpagemodel.list,而我之前一直在操作传入的list,后面操作对象弄对了,只需要操作listpagemodel.list的状态就可以控制页面上的数据。

所以上面给我的经验就是一定要明白页面上展示的数据具体是由哪个对象控制的,对象找对了,控制起来就简单,对象没找对,忙活再久也是白干。

第二个就是自己创建的组件问题

关于angular 8.1使用过程中的一些记录

sl-upload是我自己封装的一个组件

关于angular 8.1使用过程中的一些记录

这是组件内部的代码,很简单,就是包含了nz的一个上传组件,还有一些数据的处理

关于angular 8.1使用过程中的一些记录

比如上传之前的判断大小和类型,还有上传成功的提示之类的。

之所以自己写这部分,是因为nzzorro的组件自己虽然有提供大小控制和上传文件的类型控制,但是限制了以后选中保持以后不会有任何提示。所以就自己封装一下,加上了提示。

其中遇到的一个不解的问题就是双向绑定的问题

一开始我单纯的以为只要给[fileList]加上小括号就行

[(fileList)]这样就变成了双向绑定,实际上并没有,小括号加上去以后毫无作用,组件内部只是接收到了这个fileList

关于angular 8.1使用过程中的一些记录

后续的操作,父组件(严格来讲其实包了三层,是祖孙组件了)里面是拿不到子组件对fileList的修改的,因为只是单纯的传入了这个值。现在要拿子组件对fileList修改后的值,就需要加上输出,也就是@Output

关于angular 8.1使用过程中的一些记录

下图的那一行代码

this.fileListChange.emit(this.fileList)

关于angular 8.1使用过程中的一些记录

就是输出用的,只有改变值的时候加上了这一行代码,才算是完成了输出

才让父组件中[(fileList)]中的小括号有了意义,不然加不加小括号都没影响。

这样才可以在父组件中拿到经过子组件修改后的fileList的值了。

到此这篇关于angular 8.1使用过程中的一些记录的文章就介绍到这了,更多相关angular 8.1使用记录内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
JS字符串累加Array不一定比字符串累加快(根据电脑配置)
May 14 Javascript
让低版本浏览器支持input的placeholder属性(js方法)
Apr 03 Javascript
jQuery自定义添加"$"与解决"$"冲突的方法
Jan 19 Javascript
JavaScript生成带有缩进的表格代码
Jun 15 Javascript
jQuery获取this当前对象子元素对象的方法
Nov 29 Javascript
Bootstrap table简单使用总结
Feb 15 Javascript
基于vue2.0+vuex的日期选择组件功能实现
Mar 13 Javascript
JS与jQuery实现子窗口获取父窗口元素值的方法
Apr 17 jQuery
JS中利用swiper实现3d翻转幻灯片实例代码
Aug 25 Javascript
Vue.js2.0中的变化小结
Oct 24 Javascript
Angular使用过滤器uppercase/lowercase实现字母大小写转换功能示例
Mar 27 Javascript
微信小程序内拖动图片实现移动、放大、旋转的方法
Sep 04 Javascript
Vue组件生命周期运行原理解析
Nov 25 #Vue.js
vue element-ul实现展开和收起功能的实例代码
Nov 25 #Vue.js
在Vue中使用mockjs代码实例
Nov 25 #Vue.js
javascript实现左右缓动动画函数
Nov 25 #Javascript
JavaScript缓动动画函数的封装方法
Nov 25 #Javascript
js实现缓动动画
Nov 25 #Javascript
JavaScript实现缓动动画
Nov 25 #Javascript
You might like
[FAQ]PHP中的一些常识:类篇
2006/10/09 PHP
PHP表单递交控件名称含有点号(.)会被转化为下划线(_)的处理方法
2013/01/06 PHP
解析PHP中的内存管理,PHP动态分配和释放内存
2013/06/28 PHP
WordPress中缩略图的使用以及相关技巧
2015/11/24 PHP
基于逻辑运算的简单权限系统(实现) JS 版
2007/03/24 Javascript
js AspxButton的客户端操作
2009/06/26 Javascript
基于jquery的让textarea自适应高度的插件
2010/08/03 Javascript
JS TextArea字符串长度限制代码集合
2012/10/31 Javascript
商城常用滚动的焦点图效果代码简单实用
2013/03/28 Javascript
探讨jQuery的ajax使用场景(c#)
2013/12/03 Javascript
JS+CSS实现自动切换的网页滑动门菜单效果代码
2015/09/14 Javascript
JavaScript实现带缓冲效果的随屏滚动漂浮广告代码
2015/11/06 Javascript
AngularJS基础 ng-cloak 指令简单示例
2016/08/01 Javascript
AngularJS入门教程之REST和定制服务详解
2016/08/19 Javascript
javascript验证内容为数字以及长度为10的简单实例
2016/08/20 Javascript
iconfont的三种使用方式详解
2018/08/05 Javascript
[01:01:01]完美世界DOTA2联赛循环赛 GXR vs FTD BO2第一场 10.29
2020/10/29 DOTA
跟老齐学Python之大话题小函数(2)
2014/10/10 Python
在Python中使用matplotlib模块绘制数据图的示例
2015/05/04 Python
python实现将汉字转换成汉语拼音的库
2015/05/05 Python
浅谈django model postgres的json字段编码问题
2018/01/05 Python
tensorflow实现图像的裁剪和填充方法
2018/07/27 Python
Python numpy.array()生成相同元素数组的示例
2018/11/12 Python
python 杀死自身进程的实现方法
2019/07/01 Python
Python实现某论坛自动签到功能
2019/08/20 Python
python绘制动态曲线教程
2020/02/24 Python
Python中常用的os操作汇总
2020/11/05 Python
Python并发爬虫常用实现方法解析
2020/11/19 Python
如何在Cookie里面保存Unicode和国际化字符
2013/05/25 面试题
酒店销售主管岗位职责
2014/01/04 职场文书
社团2014年植树节活动总结
2014/03/11 职场文书
幼儿园中班教师寄语
2014/04/03 职场文书
2014年幼儿园教师工作总结
2014/11/08 职场文书
2015年师德师风自我评价范文
2015/03/05 职场文书
销售经理岗位职责范本
2015/04/02 职场文书
MySQL Innodb索引机制详细介绍
2021/11/23 MySQL