Angular应用开发中遇到的问题
记录在开发Angular应用时遇到的问题以及解决方案。
问题 3
前提:在Angular应用的组件中使用响应式表单进行数据校验,使用FormBuilder服务
的 group()
方法来构建一组FormControl
实例。
需要监听其中控件的值的变化时,由于控件的类型为AbstractControl类型
,可以使用它的valueChanges()
方法,该方法返回一个多播 Observable(可观察对象),每当控件的值发生变化时,它就会发出一个事件 —— 无论是通过 UI 还是通过程序。
在页面表单数据提交中使用updateValueAndValidity()
方法重新计算控件的值和检验状态,该方法参数信息如下:
updateValueAndValidity(opts: { onlySelf?: boolean; emitEvent?: boolean; } = {}): void
- 参数opts,可选,是一个object,默认值为’{}’,当更新和进行有效性检查之后,该配置项会决定控件如何传播变更并发出事件。
- onlySelf:如果为 true,则只标记当前控件。如果为 false 或没有提供,则标记所有直系祖先。默认为 false。
- emitEvent:如果为 true 或没有提供(默认),则当控件被启用时,statusChanges 和 valueChanges 这两个 Observable 都会发出最近的状态和值。 如果为 false,则不会发出事件。
- 返回值:void
问题:由于updateValueAndValidity()
方法的参数中emitEvent属性的值同时影响statusChanges()
和 valueChanges()
方法。如果不设置emitEvent属性值,则其会触发控件上的valueChanges()
方法,导致一些问题。如果设置emitEvent属性值为false,则表单状态校验会出现问题。
解决方法:updateValueAndValidity()
方法中不传值,在监听控件值的回调方法中增加值的校验。
由于在表单提交的方法中,控件的值已经固定,再次触发valueChanges()
方法的时候,观察者的方法中得到的值和控件的值相等,此处增加两种是否相等的判断,如果相等的话则不做处理。
this.validateForm.controls['dataNo'].valueChanges.subscribe(_res => {if (this.validateForm.value.dataNo!== _res) {this.getDataList(_res);}});
问题 2
问题:在Angular应用中,图标不显示,控制台报错(提示the icon not exist or is not registered)
报错信息如下:
core.js:6014 ERROR Error: [@ant-design/icons-angular]:the icon user-o does not exist or is not registered.at IconNotFoundError (ant-design-icons-angular.js:160)at MapSubscriber.project (ant-design-icons-angular.js:339)at MapSubscriber._next (map.js:29)at MapSubscriber.next (Subscriber.js:49)at RefCountSubscriber._next (Subscriber.js:72)at RefCountSubscriber.next (Subscriber.js:49)at Subject.next (Subject.js:39)at ConnectableSubscriber._next (Subscriber.js:72)at ConnectableSubscriber.next (Subscriber.js:49)at CatchSubscriber.notifyNext (OuterSubscriber.js:4)
解决方案:
NG-ZORRO官网提供了两种方式来加载图标资源文件:静态加载与动态加载
建议使用动态加载的方式来加载图标。
动态加载图标文件只需要配置 angular.json 文件
:
{"assets": [{"glob": "**/*","input": "./node_modules/@ant-design/icons-angular/src/inline-svg/","output": "/assets/"}]
}
问题 1
问题:在Angular应用中,引用ng-zorro-antd组件时,自身的样式不生效。
解决方法:在项目的src/styles.less
文件中引入ng-zorro-antd自身样式文件。
@import "~ng-zorro-antd/ng-zorro-antd.less";
相关文章:

小麦带你看postgres(代码模块结构)
初始化部分(Initialization) bootstrap:和系统表相关。 main:传递参数到后台的pg进程。 postmaster:控制pg服务开关,创建共享内存,循环等待连接并分配服务。 libpq:与子进程通讯相关…

c#学习的几个层次
1. 基本运用C#语法,在各种工具和示例代码的支持下,完成一些基本程序任务 2. 熟练掌握面向对象与组件构造,知其然亦知其所以然,完成一般小规模信息管理类软件项目开发任务 3. 深入理解CLR内核机制,对各种类型与.NET平…

nodeJs --- web服务器创建
一、下载nodeJs http://nodejs.cn/download/ 根据自己的情况选择下载 然后在命令行中输入 node -v 看是否安装成功 (下载node时,会把npm包处理工具一起下) 二、server,js 在文件夹下创建一个server.js var http require(http)http.createSer…

河北省医疗卫生数据中心案例简介
河北省卫生厅是负责全省卫生工作的政府部门,辖区人口6000万,其职能是基于国家卫生工作大政方针,研究提出全省卫生事业发展规划和战略目标,制订全省卫生工作计划、地方规范和标准,开展行业监督管理和服务。河北省卫生信…

Angular应用中tsconfig.json文件配置说明及配置全局路径映射
tsconfig.json文件配置说明1. tsconfig.json文件中的选项配置2. 配置全局路径映射1. tsconfig.json文件中的选项配置 TypeScript编译器配置文件的JSON模式 {"title": "JSON schema for the TypeScript compilers configuration file","$schema"…

疑问:c++中的memset
在dev c下调试 1 #include <mem.h>2 #include <iostream.h>3 #include <cstdlib>//配合system("PAUSE");用于看调试结果 4 5 intmain()6 {7 intia1[10];8 memset(ia1,1,10*sizeof(int));9 for(inti0;i<(sizeof(ia1)/sizeof(int));i)10 cout <…

Scrapy shell
一、Scrapy shell简介 Scrapy终端是一个交互终端,供您在未启动spider的情况下尝试及调试您的爬取代码。 其本意是用来测试提取数据的代码,不过您可以将其作为正常的Python终端,在上面测试任何的Python代码。 该终端是用来测试XPath或CSS表达式…

堆排序——HeapSort
基本思想: 图示: (88,85,83,73,72,60,57,48,42,6) 平均时间复杂度: O(NlogN)由于每次重新恢复堆的时间复杂度为O(logN),共N - 1次重新恢复堆操作,再加上前面建立堆时N / 2次向下调整,…

一个web蠕虫的简单实现
在这之前先鄙视下一些人发现漏洞就挂马的无耻行为,我曾经因为一个公开的漏洞而在一个网站站上发现24个各个所谓组织,所谓黑客的后门,鄙视!所谓蠕虫,其本质是利用计算机或者应用程序的漏洞进行感染和传播的一段程序&…

SpringBoot设置Session失效时间
1 #Session超时时间设置,单位是秒,默认是30分钟 2 server.session.timeout10 然而并没有什么用,因为SpringBoot在TomcatServletWebServerFactory代码中写了这个 1 private long getSessionTimeoutInMinutes() { 2 Duration sessi…

js url传值中文乱码完美解决(JAVA)
首先在你的jsp页面这样更改: var url"你要传入的Action的位置&ipid"ipid"&keyWord"key; 这里的key是中文,从input中取到值后,使用alert(key)发现中文没有乱码。 那么我们可以对url进行一下处理:urlen…

Angular应用中配置全局路径映射
Angular应用中配置全局路径映射1. tsconfig.json文件配置说明2. 配置全局路径映射2.1 指定baseUrl属性值2.2 配置paths属性值2.3 使用示例为了避免移动文件时调整基本文件的引用路径,或者为了引用部分文件时缩短引用路径,可以在配置文件中配置全局路径映…

对Oracle中索引叶块分裂而引起延迟情况的测试和分析
在版本10.2.0.4未打上相关one-off补丁的情况下,分别对ASSM和MSSM管理模式表空间进行索引分裂测试,经过测试的结论如下: l 在10gr2版本中MSSM方式是不能避免索引分裂引起交易超时问题; l 10.2.0.4上的one-off补丁因为目前仅存在L…

node.js和npm版本升级及升级过程中遇到的问题和解决方案
Node.js和NPM版本升级1. 安装Node.js1.1 版本检查1.2 下载安装程序1.3 安装2. npm升级2.1 版本检查2.2 升级3. 检查Node.js和npm之间的版本对应关系4. 检查Angular CLI、Angular、Node.js、TypeScript 和 RxJS 兼容性矩阵最初在本地安装Node.js和npm时,是通过Angula…

学习进度(5)
记录时间: 第六周 所花时间(包括上课) 20h 代码量(行) 400行 博客量(篇) 0篇 了解到的知识点 结对开发石家庄地铁软件,迪杰斯特拉算法的应用 转载于:https://www.cnblogs.c…

Windows搭建wnmp
http://www.cnblogs.com/wujuntian/p/7252343.html转载于:https://www.cnblogs.com/xiaobai-y/p/7815945.html

我的名字叫博客
我的部落是一个小部落,人口比较少,资源很贫瘠,但是我的人们很努力,他们都是最强的!转载于:https://www.cnblogs.com/cchenry/archive/2009/06/25/1511162.html

实例15 判断某一年是否为闰年
package wjf; import java.util.Scanner; public class wjf1{public static void main(String[] args){ //主方法Scanner scannew Scanner(System.in); System.out.println("请输入一个年份"); //向控制台输出一个提示信息long year;try{yearsc…

前端开发知识总结思维导图
前端开发扮演的一个角色: 前端开发知识点总结: 转载于:https://www.cnblogs.com/zhaodagang8/p/7821427.html

Angular应用提高打包速度
当Angular应用功能不断增加时,其打包速度会变慢,可以尝试使用以下方法缩短打包时间。 打开node_modules/webpack/lib/optimize/ModuleConcatenationPlugin.js文件,注释以下代码片段: for (let i 0; i < newModule.dependencie…

iCup,USB加热饮品方案
词条: iCup USB加热杯 USB电器 猛料: 其实看用的macbook作为例子,就知道这个设计很有一段时间啦,用i打头来为苹果打造各种莫名其妙的周边产品也是前几年的潮流,iCup出自Onur Karaalioglu的设计,将USB作为加…

Angular 文件上传与下载
Angular文件上传与下载文件上传方式1 使用NG ZORRO中的组件。文件下载方式1 直接下载方式2 通过HTTP请求后端数据的方式进行下载文件上传 方式1 使用NG ZORRO中的组件。 文件下载 方式1 直接下载 已知明确的下载链接,可以直接进行下载。 <a href"downlo…

包装类接受string 会自动将数字类型string转换成对应得包装类型
转载于:https://www.cnblogs.com/classmethond/p/10663229.html

tensorflow常用函数解析
一、tf.transpose函数的用法 tf.transpose(input, [dimension_1, dimenaion_2,..,dimension_n]):这个函数主要适用于交换输入张量的不同维度用的,如果输入张量是二维,就相当是转置。dimension_n是整数,如果张量是三维,就是用0,1,2…

FLASH处理图像的移动、缩放、旋转、颜色变换的类推荐。
这3个都是比较好的外部类,帮助操作图像的。 教程也比较详细。 看了以后发现,需要把图形学的书翻出来再补补课鸟... http://www.adobe.com/devnet/flash/articles/matrix_transformations_print.html http://blog.joa-ebert.com/imageprocessing-library/…

机器学习——XGBoost大杀器,XGBoost模型原理,XGBoost参数含义
0.随机森林的思考 随机森林的决策树是分别采样建立的,各个决策树之间是相对独立的。那么,在我们得到了第k-1棵决策树之后,能否通过现有的样本和决策树的信息, 对第m颗树的建立产生有益的影响呢?在随机森林建立之后&…

使用存储过程更新数据库!成功了但是返回值为 -1 的变态问题的解决办法!
今天遇到个表态的问题!使用带事务的存储过程执行sql语句,看数据库里面插入更新都正常! 但是返回值一直为-1! 头那个大哦!先贴2个存储过程吧!看大侠们能否找到问题的存在 USE [My_DB] GO/****** Object: St…

poj2289二分图多重匹配
题意:给你一张二分图,求右边点到汇点的最小容量(保证流量为n)是多少 题解:二分答案,每次重新建边跑最大流,看是不是为n就好了 #include<map> #include<set> #include<cmath> #include<…

Express应用配置端口
Express应用设置端口方法1 静态修改--直接修改代码中配置的默认端口号方法2 动态修改--修改代码逻辑使其获取启动命令中的端口号参数相关文章在Express应用创建成功后,应用会自动配置一个端口号,比如3000,有时会遇到端口号被占用的情况&#…

Oracle中PL/SQL的循环语句
PL/SQL的三种形式的循环:1.LOOP(无条件循环):loopstatements;end loop;2.WHILE(有条件循环):while condition loopstatements;end loop;3.FOR(固定次数循环):…