angular7项目实战常见填坑方法
对响应式表单设置默认值
this.validateForm.get('isPay').setValue('0');
获取响应式表单控件值
this.validateForm.get('equiCode').value;
重置响应式表单
this.validateForm.reset();for (const key in this.validateForm.controls) {this.validateForm.controls[key].markAsPristine();this.validateForm.controls[key].updateValueAndValidity();}}
重置响应式表单并设置指定控件的默认值
// 模特框关闭且重置表单值
modalClose() {this.validateForm.reset({fertilizerSite: 24,equipTypeRadioValue: 0,equipStatusRadioValue: 0,factoryGroupID: 611,ProvinceAreaGUID: 'f9389ddb-ee56-4baa-b6d8-b89e71afb2b8',CityAreaGUID: '8f978608-ec64-4378-8241-468b63e622d9',CountyAreaGUID: '1417a632-3f97-4555-9d79-a00875dc20b3'});
}
angular,js中计算两个数之和的bug
// 计算总价
computeTotalPrice() {const sparePartsPrice = this.validateForm.get('sparePartsPrice').value;const travelPrice = this.validateForm.get('travelPrice').value;// 扩大小数点位数最多的倍数let r1 = 0;let r2 = 0;let m = 0;let a = 0;try {r1 = sparePartsPrice.toString().split('.')[1].length;} catch (e) {r1 = 0;}try {r2 = travelPrice.toString().split('.')[1].length;} catch (e) {r2 = 0;}m = Math.pow(10, Math.max(r1, r2));a = Math.round(sparePartsPrice * m + travelPrice * m) / m;this.validateForm.get('totalPrice').setValue(a);}
分页检索bug
在具有分页的列表中，当进行大于1的页数的时候，然后点击检索，希望的结果是检索出来跳转到第一页，实际要么没数据了，要么还在后面的当前页中。
- 在html中的检索方法可以传递一个参数
- 在ts中调用该检索方法的地方，也传递值，通过传递不同的值，来改变分页当前页数
- 初始化检索的时候传递null
ngOnInit() {this.searchOrderData(null); // 初始化传递null
}
- 通过传递进来的参数是否为null来设置当前index值
// 根据检索条件检索数据searchOrderData(e: any) {this.isLoading = true;if (e !== null) {this.searchForm.pageIndex = 1;this.searchForm.tableSerialNumber =this.tools.getPagingNumber(this.searchForm.pageIndex, this.searchForm.pageSize);}// ajax请求}
- 在其他调用的地方同样传入null
// 分页改变调用数据
pageIndexChange(e: any) {this.searchForm.pageIndex = e;this.searchOrderData(null);this.searchForm.tableSerialNumber =this.tools.getPagingNumber(this.searchForm.pageIndex, this.searchForm.pageSize);
}
图片下载
// 图片下载if (/^image\[jpeg|jpg|png|gif]/.test(fileExtension)) {const x = new XMLHttpRequest();x.open('GET', fileUrl, true);x.responseType = 'blob';x.onload = (e) => {const url = window.URL.createObjectURL(x.response)const a = document.createElement('a');a.href = url;a.download = '';a.click();};x.send();}
导航栏当前激活路由active设置
正确姿势如下，如果写在同一个标签上的化，会产生样式bug
首页 管理
获取当前激活的路由及dom节点
const nowActiveRouter = this.activatedRoute['_routerState'].snapshot.url;const parentLiList = this.navbar.nativeElement.getElementsByClassName('parent_li');console.log(nowActiveRouter);switch (nowActiveRouter) {case '/knowledgeBase/hardwareTypeManage':parentLiList[2].classList.add('active');console.log(parentLiList[2]);break;case '/knowledgeBase/knowledgeBaseManage':parentLiList[2].classList.add('active');parentLiList[2]break;default:break;}
解决响应式表单验证设置禁用不生效问题
可以先设置为readonly，然后在css中设置样式即可。
input[readonly]{background-color:#F5F5F5;color:#B8B8B8;
}
input[readonly]:hover{cursor:not-allowed;border: 1px solid #d9d9d9;
}
设备编号 设备编号不能为空！ 表单去除前后空格
html
ts
// 去除空格
removeStartEndSpace(val: any, name: any) {const value = this.tools.removeStartEndSpace(val.srcElement.value);this.validateForm.get(name).setValue(value);
}
tools.ts
// 去除表单前后空格
removeStartEndSpace(val: any) {return val.replace(/(^\s*)|(\s*$)/g, '');
}
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！