Angulr4
Angular baby
软妹前端开发工程师自留地,专注Angular、Vue。
展开
-
You provided ‘undefined‘ where a stream was expected. You can provide an Observable,...报错解决
调接口时,我做了一个状态判断,如果后端返回的指定状态码不是我想要的,就返回提示信息并退出整个方法:queryMaterial = () => { ....... let loader = this.commonProvider.showLoading(''); // 页面加载状态 this.stockProvider.getPurchaseBarcode(this.barcodeObj[this.BarcodeTypeEnum.Material].barCode,原创 2020-09-23 11:57:06 · 2050 阅读 · 0 评论 -
npm install、npm install --save与npm install --save-dev、npm install -g区别
npm install XXXX:会把X包安装到node_modules目录中 不会修改package.json 之后运行npm install命令时,不会自动安装Xnpm install XXXX –save: 会把X包安装到node_modules目录中 会在package.json的dependencies属性下添加X 之后运行npm install...转载 2020-02-26 14:22:54 · 293 阅读 · 0 评论 -
Angular:路由守卫AuthGuardProvider中的checkLogin验证登录状态
系统中路由想要被访问,需要先通过路由守卫验证,看当前用户是否登录:AuthGuardProvider路由守卫服务:/* * @Author: Wangcan * @Date: 2018-05-16 13:34:23 * @Last Modified by: Wangcan * @Last Modified time: 2019-08-17 15:46:20 * @Descrip...原创 2020-01-21 14:06:58 · 1126 阅读 · 0 评论 -
echarts的雷达图(radar)鼠标移动到图标上面,如何给数据加单位
我们只需要在雷达图的data中,找到emphasis,这个是控制鼠标悬浮时高亮显示展示的雷达图中的具体数据的样式在label项中,我们配置formatter为:formatter:'{c}(单位)'这样就可以展示出数据的单位了,比如我想要我的数据单位是“%”,那么我的formatter需要这样写formatter:'{c}%'完整的代码:series: [ ...原创 2020-01-16 14:17:41 · 5672 阅读 · 0 评论 -
使用npm指令卸载安装指定版本的ng-zorro-antd
卸载:npm uninstall ng-zorro-antd安装指定版本:npm install ng-zorro-antd@1.8.1 --save原创 2020-01-08 10:25:27 · 3229 阅读 · 0 评论 -
Angular:ngStyle的使用,实现列表数据不同颜色展示
想要实现一个table中,根据数据不同而用不同颜色展示,比如:审批表经过不同次数编辑保存后,审批表列表页对应行的字体颜色变化。如第一次保存默认为黑色,第二次保存为绿色,第三次保存为红色......(暂设置5层,5层后颜色不再变化)首先要声明,由于我的table是封装起来的一个公共组件,也就是说我不得不将表格内容通过@Input()从我的使用的页面传到公共组件中,首先我们只有审批表这个列表需...原创 2019-12-12 17:28:20 · 3655 阅读 · 2 评论 -
Angular:使用echarts制作渐变色雷达图
雷达图对应的图示,雷达图上显示合同量和金额两组数据:legend: { x: 'center', data: ['合同量', '金额'], textStyle: { color: '#fff' } },设置雷达图各个坐标轴的含义、坐标轴位置、坐标轴间隔的样式等:radar: { ...原创 2019-12-02 19:44:34 · 3777 阅读 · 0 评论 -
CSS:使用css3制作渐变色纺锤线
html:<div class="mask"></div>在css文件中:.mask { overflow: hidden; margin-top: 20px; height: 20px;}.mask:after { content: ''; display: block; margin: -25px auto 0; wid...原创 2019-12-02 19:14:17 · 225 阅读 · 0 评论 -
Angular:实现一个简单的时钟
页面右上角展示一个时钟,我们只需要在html上绑定一个使用data过滤器的数据,在页面上初始化后用setInterval实现时间实时变化即可:<div nz-col nzSpan="4"> <div nz-row> <p style="margin-top:20px;color: #fff;font-size: 19px;font-...原创 2019-11-28 15:44:03 · 865 阅读 · 0 评论 -
Angular:echarts横坐标竖直显示或倾斜展示
今天在使用echarts制作直方图的时候,由于横坐标上xAxis.data太多,导致显示的时候会自动不显示一些项目,这样可能不是我们想要的效果,那要怎么才能让横坐标data竖直显示或者倾斜一定角度显示呢?首先,贴上修改前的直方图的option的xAxis部分:xAxis: [ { type: 'category', data: ['...原创 2019-11-28 09:41:28 · 726 阅读 · 0 评论 -
Angualr:列表中展示树状结构,节点可展开、编辑、新增、添加下级
下面展示如何在列表中展示一个树状结构,能新增节点、编辑节点、新增下级:首先列表上方是新增按钮,点击后调用新增方法:<div class="table-header"> <button nz-button nzType="info" (click)="addOrEditDept(1)">新增</button></div>新增一级...原创 2019-11-19 09:34:34 · 1392 阅读 · 0 评论 -
Angular:Angular 4.x中的NgTemplateOutlet指令
该指令基于已有的TemplateRef对象,插入对应的内嵌视图。在应用 NgTemplateOutlet 指令时,我们可以通过[ngTemplateOutletContext]属性来设置 EmbeddedViewRef(内嵌视图)的上下文对象。绑定的上下文应该是一个对象,此外可通过 let 语法来声明绑定上下文对象属性名。友情提示:若 let 语法未绑定任何属性名,则上下文对象中$...转载 2019-11-16 14:06:02 · 860 阅读 · 1 评论 -
Angular:(ngModelChange)没有实时触发的问题解决
在页面上的嵌套表单上,有两个字段分别为金额1(amountOne)和金额2(amountTwo),我想要实现实时捕捉这两个字段的值的变化:限制页面上的金额2要大于金额1。一开始写的代码如下:这两个字段作为editClauseForm表单下的嵌套表单purchaseFlowTempDetailVOList中的两个字段,formControlName分别是amountOne和amounTwo...原创 2019-11-14 13:48:12 · 8299 阅读 · 0 评论 -
Angular:查询DataList中符合条件的行数据的索引值index
一般来说,表格数据遍历时使用*ngFor我们就可以取到索引值:<nz-table nzSize="small" #nzTable [nzData]="DataList" [nzBordered]="true" [nzTotal]="total"> <thead> <tr> <th>审批层级</...原创 2019-11-09 10:26:25 · 1129 阅读 · 0 评论 -
Angular:formGroup中嵌套formArray,在formArray中存放的可编辑table中的字段的动态展示
今天做的项目中做了一个新增页面,其中最顶级是一个formGroup表单命名为editClauseForm,里面有几个单独的字段,还有一个嵌套的formArray,命名为clauseArr,这个clauseArr中存放一个用户自己可填写的table。其中有一个“默认人员”字段是弹窗中选择人员之后把名称带出来填到这个字段中:关闭弹窗后用户名称name已经拿到了,但是我发现在ts上不知道怎么绑定...原创 2019-10-30 09:20:06 · 1841 阅读 · 0 评论