- 博客(22)
- 收藏
- 关注
原创 mat-menu超出屏幕产生空白的问题解决方案。
问题:触发menu的元素在屏幕最右侧,但是会产生留白,无法占满屏幕。问题代码:<div class="nav-menu-op"> <mat-icon [matMenuTriggerFor]="beforeMenu">line_weight_icon</mat-icon> <mat-menu #beforeMenu="matMenu...
2020-03-18 15:25:40
414
原创 使用RxJS管理异步函数的执行顺序
场景:如果有两个异步请求A和B,B要在A请求得到唯一id之后再触发,并使用id作为api的参数,那么就很需要管理异步请求的发生顺序了,即先A再B。解决方案: RxJS中的operators里有map,switchMap可以很好的管理异步请求的结果。map可以处理Observable的结果,switchMap可以将异步A跳转到异步B的订阅。放一段Angular中routing module里的re...
2019-12-17 10:16:26
2818
原创 React-Redux中的Connect函数, Store, Action, Reducer个人小结
store:总的一个状态树,基于reducer的数量组成(每个reducer理想情况下代表一个关联到store,需要监听state变化的组件),getState() API产生的状态类似于:{ component1: { state1: 'I am state 1', state2: [], state3: false }, com...
2019-10-21 16:29:55
802
原创 AngularMaterial的Mat-Card自带最小宽度
Mat-card有一个最小宽度,在做pc web应用移动端的css调试时遇到了这个坑。因为单元组件是一个一个的mat-card,内容是在mat-card里的一个个div,所以当我在布局行和列的时候,如果一行要设置四个到六个,mat-card最小宽度会导致无法设置单元组件的宽度。解决办法就是在单元组件的css中设置:mat-card{ width:auto;}然后单元组件的宽度在父...
2019-09-30 23:38:55
825
原创 在Angular中引入Angular Material Icon的正确步骤
背景:Angular7, Angular Material7步骤:先注册 MatIconModuleimport { MatIconModule } from '@angular/material/icon';@NgModule({ imports: [ .... MatIconModule ], exports: [ MatIconModule ...
2019-09-20 10:07:32
2410
转载 chrome浏览器最小字号问题
问题原因chrome为了提升用户体验,根据电脑分辨率等条件给浏览器设置了默认的最小字号min px,小于这个字号的字体将仍然使用min px显示查看最小字体浏览器–>设置(settings)–>高级设置(advanced)–>显示(Appearence)–>Customise fonts–>Minimum font size...
2019-09-20 09:47:10
530
原创 chrome不使用缓存硬性加载(刷新)网页的快捷方法
方法一:CTRL+H 清除缓存再刷新。方法二:F12打开控制台,右键刷新键,硬性重新加载。(快捷键 CTRL+SHIFT+R)
2019-09-11 09:08:14
1318
原创 svg里的text不能自动换行的解决办法
svg里的text不能自动换行,使用\n等方法都无效。可以使用两个方法去实现多行文本。方法一: 添加多个text,给这两个text赋一样的class,每个text设置不同的x,y坐标const svg = d3.select("#oee-chart") .append("svg") .attr("width", width) .attr("height",...
2019-09-10 13:26:14
4583
原创 js把秒转化成不同格式的时间
输入参数为秒。方法1 结果 “1d23h18m15s”function transform(secs){ if(secs){ var second = parseFloat((secs % 60).toFixed(1)); var minute = Math.floor(secs/ 60) % 60; var hour = Math.floor(secs / 3600...
2019-09-10 11:13:52
256
原创 Angular Material Mat Table的dataSource变化时不会自动刷新
Mat Table的dataSource 改变时,mat-table 不会自动更新,但是mat expansion panel 可以自动侦测数据源变化。解决办法是,可以给table一个#名字 用ViewChild()获取这个table 然后手动 table.renderRows() 方法来刷新table。<table mat-table #table [dataSource]="data...
2019-08-17 21:24:45
2481
原创 js/ts中使用return跳出含有forEach循环的function函数
forEach本身是个高阶函数,调用回调函数,所以在forEach内部的return只会先跳出forEach,不会直接跳出forEach外部的函数。ts:saveNode(){ if(this.checkInputError(this.modbusDeviceInfo) && this.checkInputError(this.deviceNodeInfo)){ ...
2019-08-08 11:16:08
6803
原创 Angular获取formGroup里嵌套的formGroup
使用get方法和as类型判断ts:this.myForm = this.formBuilder.group({Address: [null, Validators.required],Neighbour: this.formBuilder.group({ Name:[null, Validators.required], Flat:[null, Validators.re...
2019-08-06 22:06:49
1605
原创 JS中string转为number方法
parseInt, parseFloat最喜欢用的Number(string);例如: Number(‘1000.1’) => 1001.1
2019-07-25 22:32:26
55623
原创 TS实例化对象并不会实例化对象内部的数组属性
写TS的时候,经常创建数组变量,并且声明了类型就直接去使用。比如在一个Object里的一个属性是一个数组ts: export class Car{ tires: string[], length: number, height: number}let car = new Car();car.tires.push('frontTire'); // 会报错,因为car.ti...
2019-07-25 22:19:36
3307
原创 JS中null与undefined个人总结
先引用一下阮老师的话:null表示"没有对象",即该处不应该有值。典型用法是:(1) 作为函数的参数,表示该函数的参数不是对象。(2) 作为对象原型链的终点。undefined表示"缺少值",就是此处应该有一个值,但是还没有定义。典型用法是:(1)变量被声明了,但没有赋值时,就等于undefined。(2) 调用函数时,应该提供的参数没有提供,该参数等于undefined。(3...
2019-07-25 22:10:34
187
原创 Angular中input使用ngModel双向绑定一个对象时出现cannot bind property of undefined
Background:项目中要给公司设计一个页面专门配置机器,其中有很多text input需要手动输入,最后将这些input的value组成一个json传到后端。因为在这个json中有很多嵌套的object和array,是一个复杂的json object。(因为跟底层嵌入式开发有点关系)给个部分json吧。Basic on: Angular7{ "isModbusTCP": true,...
2019-07-21 00:14:37
962
原创 Angular中设置想要达到元素hover效果的API
背景: 最近项目中遇到需要设计导航栏的菜单,移动到某一导航标签时,需要显示一个隐藏的TAG。参考了一下淘宝导航栏的设计,发现他们也是使用水平方向的ul,在每个li里嵌入div来布局。项目需求 是在移动到某个img时候,触发一个向下的子菜单区域,所以我的思路是:将img和子菜单区域的div外层套一个container,对container进行hover操作。方法: 在Angular4中就有了(...
2019-07-18 00:46:12
3775
原创 如何使一个ul变成水平方向上的无序列表
正常的ul是垂直排列的,但是如果想要设置成一行的元素的话,可以按照以下步骤:先去掉列表的点,css: ul {list-style-type:none;}其次将li设置浮动 float:right / left;如果想要整个ul向左或者向右对齐,可以直接对ul设置float:left/right。...
2019-07-18 00:31:50
1768
原创 JS关于DATE的常用点
因为项目里经常设计JS 中的Date对象,故来整理一下常用的构建和方法。实例化new Date(); 返回当前日期new Date(value); value是一个代表时间的字符串,例如“December 17, 1995 03:24:00”new Date(dateString); dateString: 一个ISO字符串“1995-12-17T03:24:00”new Date(y...
2019-07-12 08:36:17
139
原创 固定DIV于页面底部和滚动条一起滚动
CSS固定div且随滚动条滚动项目需求是将二维码固定在页面上,随页面滑动。弱点:css position 值及其对应的效果。.QRcode{ display:block; bottom:10px; right:20px; width:110px; height:120px; position:fixed;}...
2019-07-11 17:29:53
1700
原创 Angular中使用ng-pick-datetime的event来触发一些函数修改一些属性
记录一下项目里用ng-pick-datetime包来载入日历控件本来这一块是同事写的,今天有个新的需求要控制所选时间段长度最大为一天,就看了下同事代码学习了一下。记录一下今天的TRAP。先上代码。HTML:<div id="start-form" class='form-group'> <h3>FROM: </h3> &l...
2019-07-09 20:28:19
703
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人