mat-menu超出屏幕产生空白的问题解决方案。 问题：触发menu的元素在屏幕最右侧，但是会产生留白，无法占满屏幕。问题代码：<div class="nav-menu-op"> <mat-icon [matMenuTriggerFor]="beforeMenu">line_weight_icon</mat-icon> <mat-menu #beforeMenu="matMenu...
使用RxJS管理异步函数的执行顺序 场景：如果有两个异步请求A和B，B要在A请求得到唯一id之后再触发，并使用id作为api的参数，那么就很需要管理异步请求的发生顺序了，即先A再B。解决方案： RxJS中的operators里有map，switchMap可以很好的管理异步请求的结果。map可以处理Observable的结果，switchMap可以将异步A跳转到异步B的订阅。放一段Angular中routing module里的re...
React-Redux中的Connect函数, Store, Action, Reducer个人小结 store:总的一个状态树，基于reducer的数量组成（每个reducer理想情况下代表一个关联到store，需要监听state变化的组件），getState() API产生的状态类似于：{ component1: { state1: 'I am state 1', state2: [], state3: false }, com...
AngularMaterial的Mat-Card自带最小宽度 Mat-card有一个最小宽度，在做pc web应用移动端的css调试时遇到了这个坑。因为单元组件是一个一个的mat-card，内容是在mat-card里的一个个div，所以当我在布局行和列的时候，如果一行要设置四个到六个，mat-card最小宽度会导致无法设置单元组件的宽度。解决办法就是在单元组件的css中设置：mat-card{ width:auto;}然后单元组件的宽度在父...
在Angular中引入Angular Material Icon的正确步骤 背景：Angular7, Angular Material7步骤：先注册 MatIconModuleimport { MatIconModule } from '@angular/material/icon';@NgModule({ imports: [ .... MatIconModule ], exports: [ MatIconModule ...
chrome浏览器最小字号问题 问题原因chrome为了提升用户体验，根据电脑分辨率等条件给浏览器设置了默认的最小字号min px，小于这个字号的字体将仍然使用min px显示查看最小字体浏览器–>设置(settings)–>高级设置(advanced)–>显示(Appearence)–>Customise fonts–>Minimum font size...
svg里的text不能自动换行的解决办法 svg里的text不能自动换行，使用等方法都无效。可以使用两个方法去实现多行文本。方法一： 添加多个text，给这两个text赋一样的class，每个text设置不同的x，y坐标const svg = d3.select("#oee-chart") .append("svg") .attr("width", width) .attr("height",...
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...
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...
js/ts中使用return跳出含有forEach循环的function函数 forEach本身是个高阶函数，调用回调函数，所以在forEach内部的return只会先跳出forEach，不会直接跳出forEach外部的函数。ts:saveNode(){ if(this.checkInputError(this.modbusDeviceInfo) && this.checkInputError(this.deviceNodeInfo)){ ...
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...
TS实例化对象并不会实例化对象内部的数组属性 写TS的时候，经常创建数组变量，并且声明了类型就直接去使用。比如在一个Object里的一个属性是一个数组ts: export class Car{ tires: string[], length: number, height: number}let car = new Car();car.tires.push('frontTire'); // 会报错，因为car.ti...
JS中null与undefined个人总结 先引用一下阮老师的话：null表示"没有对象"，即该处不应该有值。典型用法是：（1） 作为函数的参数，表示该函数的参数不是对象。（2） 作为对象原型链的终点。undefined表示"缺少值"，就是此处应该有一个值，但是还没有定义。典型用法是：（1）变量被声明了，但没有赋值时，就等于undefined。（2) 调用函数时，应该提供的参数没有提供，该参数等于undefined。（3...
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,...
Angular中设置想要达到元素hover效果的API 背景： 最近项目中遇到需要设计导航栏的菜单，移动到某一导航标签时，需要显示一个隐藏的TAG。参考了一下淘宝导航栏的设计，发现他们也是使用水平方向的ul，在每个li里嵌入div来布局。项目需求 是在移动到某个img时候，触发一个向下的子菜单区域，所以我的思路是：将img和子菜单区域的div外层套一个container，对container进行hover操作。方法： 在Angular4中就有了(...
如何使一个ul变成水平方向上的无序列表 正常的ul是垂直排列的，但是如果想要设置成一行的元素的话，可以按照以下步骤：先去掉列表的点，css: ul {list-style-type:none;}其次将li设置浮动 float:right / left；如果想要整个ul向左或者向右对齐，可以直接对ul设置float:left/right。...
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...
关注
