关于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使用记录内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • angularJS中router的使用指南

    这几天看了angularjs和backbone,大看了解了knockout和emberjs,刚刚上网看到了一个angular的router的demo,现在顺便记下来 复制代码 代码如下: <!--- DEMO_INDEX.html --> <!doctype html> <head> <meta charset="utf-8"> <title>route</title> </head><br>

  • 使用AngularJS处理单选框和复选框的简单方法

    AngularJS对表单的处理相当简单.在AngularJS使用双向数据绑定方式进行表单验证的时候,实质上它在帮我们进行表单处理. 使用复选框的的例子有很多,同时我们对它们的处理方式也有很多.这篇文章中我们将看一看把复选框和单选按钮同数据变量绑定的方法和我们对它的处理办法. 创建Angular表单 在这篇文章里,我们需要两个文件:index.html和app.js.app.js用来保存所有的Angular代码(它不大),而index.html是动作运行的地方.首先我们创建AngularJS文件.

  • angular.foreach 循环方法使用指南

    angular有自己的生命周期.循环给一个 angular监听的变量复值时.最好还是用angular自带的循环方法."angular.foreach" 格式: 复制代码 代码如下: var objs =[{a:1},{a:2}]; angular.forEach(objs, function(data,index,array){ //data等价于array[index] console.log(data.a+'='+array[index].a); }); 参数如下: objs:需要

  • angular2使用简单介绍

    让我们从零开始,使用Typescript构建一个超级简单的 AngularJs 2应用. 先跑一个DEMO 运行这个 DEMO先来感受一下 AngularJS2 的应用. 下面是这个应用的文件结构 angular2-app |_ app | |_ app.component.ts | |_ main.ts |_ index.html |_ license.md 总结来说就是一个 index.html 文件和两个在 app 文件下的 Typescript 文件, 我们可以hold住! 下面我们将一

  • 实例详解angularjs和ajax的结合使用

    实例详解angularjs和ajax的结合使用

    这是一篇关于easyui配合ajax使用的文章,顺带介绍angularjs的使用以及让你感受到angularjs的威力.网上对于ajax 的文也是多如牛毛 .我就不直接从那种原生的httpxmlrequest 对象的js 写起了哈.看那种东西也存粹是了解 高层的东西是怎么来的 原理是啥真正做的时候写那种东西 不是扯淡么 你叼你技术牛逼整站的代码你全用那种写.html js 这种东西最开始设计出来就没考虑周全就是坨屎.还好现在有各种框架 可以帮助我们更容易的把这坨屎做的更美味.也还好由于互联网事业

  • 学习使用AngularJS文件上传控件

    学习使用AngularJS文件上传控件

    前段时间做项目遇到一个需求是上传文件,大概需要实现的样式是这样子的,见下图: 需要同时上传两个文件.并且规定文件格式和文件大小.因为前端框架使用angular,且不想因为一个上传功能又引入一个jquery,所以在网上查找基于angular的上传控件,因为angular还算比较新,貌似都没有太成熟的插件,网上的教程也大多是复制粘贴,总之没起倒多大的作用...但是皇天不负有心人,最后还是让我遇到了这个功能强大的插件,让我有种相见恨晚的感觉呀,依靠官方文档和师兄的帮助,终于搞清楚了基本的使用方法.好东

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

    说起来已经使用了大概一年半的angular,大概已经渐渐习惯了这个前端框架吧,但是具体的原理和底层的代码都没有仔细的看过. 前阵子以前做的一个项目有了新的需求,而且比较麻烦,讲讲做的过程中遇到的一些问题 首先是勾选状态的保持问题 在模板中思考了很久,用了各种方法,修改传入值,页码改变以后勾选状态就是会有奇怪的问题,比如在代码里明明把选中的给去掉了,但是页面上还是勾选状态,最后折腾来折腾去,发觉操作的对象不对:页面上的是模板里面的list,就是listpagemodel.list,而我之前一直在操

  • 详解关于Angular4 ng-zorro使用过程中遇到的问题

    写在前面 由于现在网络上Angular 4的相关技术文档不是很充分,我写出这个采坑的记录文档,一方面是想给自己在项目中遇到的各种问题与个人的理解记录下来,另一方面也想着某些坑大家可能也会遇到,也可以给道友做一个参考.文档中的很多地方多有不足,后期我会慢慢完善,也希望道友们能够及时指出文档中不正确的与可以优化的地方. 我计划将该帮助文档分为4个章节: 章节一: 关于angular 4 + ng-zorro在基础布局与模块拆分上的一些问题与操作步骤 章节二: angular 4 引入路由=> 组件模

  • SpringMail使用过程中的报错解决办法

    SpringMail使用过程中的报错解决办法 1.Unable to locate provider for protocol: smtp –>缺少依赖造成的 <dependency> <groupId>javax.mail</groupId> <artifactId>mail</artifactId> <version>1.4</version> </dependency> <dependency

  • 浅谈PHP接入(第三方登录)QQ登录 OAuth2.0 过程中遇到的坑

    前言 绝大多数网站都集成了第三方登录,降低了注册门槛,增强了用户体验.最近看了看 QQ 互联上 QQ 登录的接口文档.接入 QQ 登录的一般流程呢,是这样的:先申请开发者 -> 然后创建应用(拿到一组 AppId 和 AppKey)-> 获取 access_token -> 获取 openid -> 调用 openApi 访问或修改用户信息. 然而,从申请个人开发者开始,坑就来了. 1. 申请(个人)开发者 QQ 互联中申请开发者信息的页面,一些重点太过简陋,缺失细节,比如身份证正

  • sql server 2008安装过程中服务器配置出错解决办法

    sql server 2008安装过程中服务器配置出错解决办法

    sql server 2008安装过程中服务器配置出错,求助!!!!!!! 解决方法: 当sql2008安装导向运行到这里时: 请选择:对所有SQL Server 服务使用相同的账号: 但这里不能给他设置自己定义的账号和密码(例如下面设置它的账号为sa,密码为654321)就会发生错误: 解决方法如下图所示: 1.  首先要点击"对所有SQL Server 服务使用相同的账号" 然后会弹出一对话框让我们输入账户和密码:我们点击账户后面的下拉列表从中学则任意一个账户,在这里密码就不用填写

  • 解决vue.js在编写过程中出现空格不规范报错的问题

    解决vue.js在编写过程中出现空格不规范报错的问题

    找到build文件夹下面的webpack.base.conf.js文件. 然后打开该文件,找到图下这段代码,把他注释掉. 注释掉之后,再进行子页面等编写的时候,空格不规范的情况下也不会再报错啦.因为这个报错对于初学者来说实在头大.哈哈O(∩_∩)O哈哈~ 我标注的这些地方,原本是有严格的空格规范要求的,这些报错真是另人烦躁呀o(╥﹏╥)o 反正我把这个问题解决了,特别开心哒哒哒~~~ 以上这篇解决vue.js在编写过程中出现空格不规范报错的问题就是小编分享给大家的全部内容了,希望能给大家一个参考

  • IIS7.0配置过程中出现HTTP 错误 403.14的解决方法

    IIS7.0配置过程中出现HTTP 错误 403.14的解决方法

    在Win7系统下IIS7.0配置的过程中出现如下错误页面: 解决方案: 1.打开IIS管理器. 2.在"功能"视图中,双击"目录浏览". 3.在"目录浏览"页上,在"操作"窗格中单击"启用". 4.设置好后就可以访问发布的文件了: 在iis安装过程中遇到的问题,大家都可以查看我们里的相关内容进行解决. 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们.

  • 基于ios逆向过程中lldb调试技巧(推荐)

    假如你准备在模拟器里面运行这个,你可以在"(lldb)"提示的后面输入下面的: (lldb) po $eax LLDB在xcode4.3或者之后的版本里面是默认的调试器.假如你正在使用老一点版本的xcode的话,你又GDB调试器.他们有一些基本的相同的命令,因此假如你的xcode使用的是"(gdb)"提示,而不是"(lldb)"提示的话,你也能够更随一起做,而没有问题. "po"命令是"print object&qu

  • iOS 条码及二维码扫描（从相册中读取条形码/二维码）及扫码过程中遇到的坑

    iOS 条码及二维码扫描（从相册中读取条形码/二维码）及扫码过程中遇到的坑

    文章重点介绍如何解决,从手机相册中读取条形码和二维码的问题 1.扫码. 网上有特别的关于iOS扫码的代码和示例,其中扫码主要使用的是自带的AVFoundation类.这里就不细说了,要注意的是如何设置扫描区域,识别区域(这个值是按比例0~1设置,而且X.Y要调换位置,width.height调换位置) <span style="font-size:14px;">//创建输出流 AVCaptureMetadataOutput * output = [[AVCaptureMet

  • CloudStack 安装及使用过程中常见问题汇总

    CloudStack 安装及使用过程中常见问题汇总             在做工程项目中对CloudStack 安装及使用过程中常见的几个问题及如何解决做一个总结.   1.Windows XP虚拟机内部重启不能正确获取IP,windows xp iso建立VM,重启VM无法正确获取IP地址,原因是没有加入域,可以通过修改注册表来解决此问题.设置组策略 计算机配置--管理模板--网络--DNS客户端里的DNS后缀搜索列表,设置为已启动,后缀值为cs1group.internal Windows

随机推荐