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";

Angular应用开发中遇到的问题相关推荐

那些年开发中遇到的坑。。。
1.样式继承问题:在angular实际开发中,调用deps配置对应的css-js-html之间的逻辑关系,最好是每个html的页面使用单独的模块命名,名称不要相同,在切换页面的时候,会出现样式的渲染继 ...
angular开发中对请求数据层的封装
代码地址如下: http://www.demodashi.com/demo/11481.html 一.本章节仅仅是对angular4项目开发中数据请求封装到model中仅仅是在项目angular4项 ...
angular蚂蚁_Angular 中后台前端解决方案 - Ng Alain 介绍
背景之前项目使用过vue.js+iview,习惯了后端开发的我,总觉得使用不习惯,之前分析易企秀前端代码,接触到了angular js,完备的相关功能,类似后端开发的体验,让人耳目一新,全新的ang ...
谈谈 SAP 产品 UI 开发中的组件概念
这是 Jerry 2021 年的第 54 篇文章,也是汪子熙公众号总共第 331 篇原创文章. 任何企业级软件的前端开发,都离不开组件(Component)这个概念.撇开具体的 UI 开发技术不谈,所 ...
Vue CLI 3开发中屏蔽烦人的EsLint错误
问题 Vue开发中,特别是当你阅读分析别人的其中早期版本的Vue代码时往往会遭遇到满屏幕的烦人的EsLint错误.有关EsLint这个工具的作用不再赘述.查阅网上参考文档,大多是针对早起版本Vue C ...
gulp自己主动化任务脚本在HybridApp开发中的使用
眼下做前端开发的同学可能都熟悉grunt.fis之类的自己主动化构建工具.事实上在HybridApp开发中我们也能够使用这些工具来简化我们的工作.gulp就是一个比grunt,fis都先进的构建工具. ...
angular发布代码有缓存_如何在Angular应用程序中执行请求？
全文共5358字,预计学习时长16分钟来源:Pexels 本文将讨论如何在Angular应用程序中执行请求. 1. 使用拦截器来装饰请求 2. HttpClient 与HttpBackend的对比 ...
微服务开发中的数据架构设计 1
GitChat 作者:陈伟荣原文:微服务开发中的数据架构设计关注微信公众号:「GitChat 技术杂谈」一本正经的讲技术 [不要错过文末彩蛋] 前言微服务是当前非常流行的技术框架,通过服务的小 ...
关于Angular，开发人员经常忽视的9个想法
全文共3696字,预计学习时长11分钟图源:Unsplash Angular已经出现有段时间了,但很多人仍然在通过扩展应用程序来满足需求. 于是乎,热心市民小芯这次通过总结过去几年为客户使用Angu ...

Angular应用开发中遇到的问题

问题 3

前提：在Angular应用的组件中使用响应式表单进行数据校验，使用`FormBuilder服务`的 `group()`方法来构建一组`FormControl`实例。

解决方法：`updateValueAndValidity()`方法中不传值，在监听控件值的回调方法中增加值的校验。

问题 2

问题：在Angular应用中，图标不显示，控制台报错(提示the icon not exist or is not registered)

解决方案：

问题 1

问题：在Angular应用中，引用ng-zorro-antd组件时，自身的样式不生效。

解决方法：在项目的`src/styles.less`文件中引入ng-zorro-antd自身样式文件。

Angular应用开发中遇到的问题相关推荐

最新文章

热门文章

Angular应用开发中遇到的问题

问题 3

前提：在Angular应用的组件中使用响应式表单进行数据校验，使用FormBuilder服务的 group()方法来构建一组FormControl实例。

解决方法：updateValueAndValidity()方法中不传值，在监听控件值的回调方法中增加值的校验。

问题 2

问题：在Angular应用中，图标不显示，控制台报错(提示the icon not exist or is not registered)

解决方案：

问题 1

问题：在Angular应用中，引用ng-zorro-antd组件时，自身的样式不生效。

解决方法：在项目的src/styles.less文件中引入ng-zorro-antd自身样式文件。

Angular应用开发中遇到的问题相关推荐

最新文章

热门文章

前提：在Angular应用的组件中使用响应式表单进行数据校验，使用`FormBuilder服务`的 `group()`方法来构建一组`FormControl`实例。

解决方法：`updateValueAndValidity()`方法中不传值，在监听控件值的回调方法中增加值的校验。

解决方法：在项目的`src/styles.less`文件中引入ng-zorro-antd自身样式文件。