Angular
一只矿崽
这个作者很懒,什么都没留下…
展开
-
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 阅读 · 0 评论 -
使用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 · 2833 阅读 · 0 评论 -
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 · 709 阅读 · 0 评论 -
Angular中设置想要达到元素hover效果的API
背景: 最近项目中遇到需要设计导航栏的菜单,移动到某一导航标签时,需要显示一个隐藏的TAG。参考了一下淘宝导航栏的设计,发现他们也是使用水平方向的ul,在每个li里嵌入div来布局。项目需求 是在移动到某个img时候,触发一个向下的子菜单区域,所以我的思路是:将img和子菜单区域的div外层套一个container,对container进行hover操作。方法: 在Angular4中就有了(...原创 2019-07-18 00:46:12 · 3788 阅读 · 0 评论 -
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 · 967 阅读 · 0 评论 -
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 · 1608 阅读 · 0 评论 -
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 · 2494 阅读 · 0 评论 -
在Angular中引入Angular Material Icon的正确步骤
背景:Angular7, Angular Material7步骤:先注册 MatIconModuleimport { MatIconModule } from '@angular/material/icon';@NgModule({ imports: [ .... MatIconModule ], exports: [ MatIconModule ...原创 2019-09-20 10:07:32 · 2415 阅读 · 0 评论 -
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 · 833 阅读 · 0 评论