关于angular 8.1使用过程中的一些记录
说起来已经使用了大概一年半的angular，大概已经渐渐习惯了这个前端框架吧，但是具体的原理和底层的代码都没有仔细的看过。
前阵子以前做的一个项目有了新的需求，而且比较麻烦，讲讲做的过程中遇到的一些问题
首先是勾选状态的保持问题
在模板中思考了很久，用了各种方法，修改传入值，页码改变以后勾选状态就是会有奇怪的问题，比如在代码里明明把选中的给去掉了，但是页面上还是勾选状态，最后折腾来折腾去，发觉操作的对象不对：页面上的是模板里面的list,就是listpagemodel.list，而我之前一直在操作传入的list,后面操作对象弄对了，只需要操作listpagemodel.list的状态就可以控制页面上的数据。
所以上面给我的经验就是一定要明白页面上展示的数据具体是由哪个对象控制的，对象找对了，控制起来就简单，对象没找对，忙活再久也是白干。
第二个就是自己创建的组件问题
sl-upload是我自己封装的一个组件
这是组件内部的代码，很简单，就是包含了nz的一个上传组件，还有一些数据的处理
比如上传之前的判断大小和类型，还有上传成功的提示之类的。
之所以自己写这部分，是因为nzzorro的组件自己虽然有提供大小控制和上传文件的类型控制，但是限制了以后选中保持以后不会有任何提示。所以就自己封装一下，加上了提示。
其中遇到的一个不解的问题就是双向绑定的问题
一开始我单纯的以为只要给[fileList]加上小括号就行
[(fileList)]这样就变成了双向绑定，实际上并没有，小括号加上去以后毫无作用，组件内部只是接收到了这个fileList
后续的操作，父组件（严格来讲其实包了三层，是祖孙组件了）里面是拿不到子组件对fileList的修改的，因为只是单纯的传入了这个值。现在要拿子组件对fileList修改后的值，就需要加上输出，也就是@Output
下图的那一行代码
this.fileListChange.emit(this.fileList)
就是输出用的，只有改变值的时候加上了这一行代码，才算是完成了输出
才让父组件中[(fileList)]中的小括号有了意义，不然加不加小括号都没影响。
这样才可以在父组件中拿到经过子组件修改后的fileList的值了。
到此这篇关于angular 8.1使用过程中的一些记录的文章就介绍到这了,更多相关angular 8.1使用记录内容请搜索猪先飞以前的文章或继续浏览下面的相关文章希望大家以后多多支持猪先飞！
相关文章
- 有时为了网站安全和版权问题，会对自己写的php源码进行加密，在php加密技术上最常用的是zend公司的zend guard 加密软件，现在我们来图文讲解一下。 下面就简单说说如何...2016-11-25
- ps软件是现在很多人都会使用到的，HSL面板在ps软件中又有着非常独特的作用。这次文章就给大家介绍下ps怎么使用HSL面板，还不知道使用方法的下面一起来看看。  ...2017-07-06
- 许多的朋友对于Plesk控制面板应用不是非常的了解特别是英文版的Plesk控制面板，在这里小编整理了一些关于Plesk控制面板常用的使用方案整理，具体如下。 本文基于Linu...2016-10-10
使用insertAfter()方法在现有元素后添加一个新元素
复制代码 代码如下: //在现有元素后添加一个新元素 function insertAfter(newElement, targetElement){ var parent = targetElement.parentNode; if (parent.lastChild == targetElement){ parent.appendChild(newEl...2014-05-31- 大概有如下步骤 新建项目Bejs 新建文件package.json 新建文件Gruntfile.js 命令行执行grunt任务 一、新建项目Bejs源码放在src下，该目录有两个js文件，selector.js和ajax.js。编译后代码放在dest，这个grunt会...2014-06-07
使用percona-toolkit操作MySQL的实用命令小结
1.pt-archiver 功能介绍： 将mysql数据库中表的记录归档到另外一个表或者文件 用法介绍： pt-archiver [OPTION...] --source DSN --where WHERE 这个工具只是归档旧的数据，不会对线上数据的OLTP查询造成太大影响，你可以将...2015-11-24如何使用php脚本给html中引用的js和css路径打上版本号
在搜索引擎中搜索关键字.htaccess 缓存，你可以搜索到很多关于设置网站文件缓存的教程，通过设置可以将css、js等不太经常更新的文件缓存在浏览器端，这样访客每次访问你的网站的时候，浏览器就可以从浏览器的缓存中获取css、...2015-11-24jQuery 1.9使用$.support替代$.browser的使用方法
jQuery 从 1.9 版开始，移除了 $.browser 和 $.browser.version ， 取而代之的是 $.support 。 在更新的 2.0 版本中，将不再支持 IE 6/7/8。 以后，如果用户需要支持 IE 6/7/8，只能使用 jQuery 1.9。 如果要全面支持 IE，并混合...2014-05-31安装和使用percona-toolkit来辅助操作MySQL的基本教程
一、percona-toolkit简介 percona-toolkit是一组高级命令行工具的集合，用来执行各种通过手工执行非常复杂和麻烦的mysql和系统任务，这些任务包括： 检查master和slave数据的一致性 有效地对记录进行归档 查找重复的索...2015-11-24- 一、下载 mysqlsla [root@localhost tmp]# wget http://hackmysql.com/scripts/mysqlsla-2.03.tar.gz--19:45:45-- http://hackmysql.com/scripts/mysqlsla-2.03.tar.gzResolving hackmysql.com... 64.13.232.157Conn...2015-11-24
- 目前，JSON已经成为最流行的数据交换格式之一，各大网站的API几乎都支持它。我写过一篇《数据类型和JSON格式》，探讨它的设计思想。今天，我想总结一下PHP语言对它的支持，这是开发互联网应用程序（特别是编写API）必须了解的知识...2015-10-30
- 无限级分类在开发中经常使用，例如：部门结构、文章分类。无限级分类的难点在于“输出”和“查询”，例如 将文章分类输出为<ul>列表形式； 查找分类A下面所有分类包含的文章。1.实现原理 几种常见的实现方法，各有利弊。其中...2015-10-23
- C#注释的一些使用方法浅谈，需要的朋友可以参考一下...2020-06-25
- php类的使用实例教程 <?php /** * Class program for yinghua05-2 * designer :songsong */ class Template { var $tpl_vars; var $tpl_path; var $_deb...2016-11-25
- 前几天在百度知道里面看到有人问PHP中双冒号::的用法，当时给他的回答比较简洁因为手机打字不大方便！今天突然想起来，所以在这里总结一下我遇到的双冒号::在PHP中使用的情况！双冒号操作符即作用域限定操作符Scope Resoluti...2015-11-08
- mysqli封装了诸如事务等一些高级操作，同时封装了DB操作过程中的很多可用的方法。应用比较多的地方是 mysqli的事务。...2013-10-02
Postman安装与使用详细教程 附postman离线安装包
这篇文章主要介绍了Postman安装与使用详细教程 附postman离线安装包,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下...2021-03-05- Promise是异步编程的一种解决方案，在ES6中Promise被列为了正式规范，统一了用法，原生提供了Promise对象。接下来通过本文给大家介绍Promise的介绍及基本用法，感兴趣的朋友一起看看吧...2021-10-21
- 基本思路： 通过使用jquery选择器得到对应表单的jquery对象，然后使用attr方法修改对应的action 示例程序一： 默认情况下，该表单会提交到page_one.html 点击button之后，表单的提交地址就会修改为page_two.html 复制...2014-06-07
- 这篇文章主要介绍了vs2019安装和使用详细图文教程，本文通过图文并茂的形式给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2020-06-25