前沿web开发框架
Angular
Angular 是一个开发平台。它能帮你更轻松的构建 Web 应用。Angular 集声明式模板、依赖注入、端到端工具和一些最佳实践于一身，为你解决开发方面的各种挑战。Angular 为开发者提升构建 Web、手机或桌面应用的能力。
Angular Universal window is not defined
2021年05月11日
最近在使用Angular Universal的时候，有一些代码使用了window，在编译的时候出现错误，具体错误内容：window is not defined出现问题的原因：如果从诸如Node.js之类的服务器呈现应用程序，则可能是由于对Window对象的引用导致此错误。解决方案：首先，包装全局Window对象的服务：windowRef.service.tsimport {Injectable}...
关于Angular 修改表单Select不自动更新问题
2021年02月06日
在Angular中修改表单，当结果从后端读取，mat-select无法自动更新，需要点击页面上的一个表单才会更新，一图胜千言：具体代码如下：ngOnInit() { // GET URI ID this.getCloudVendorID = this.activateRoute.snapshot.params['id']; // get all countries this...
Typescript 判断IPv4地址
2020年12月17日
最近在使用Angular的时候，需要判断IPv4地址的合法性，下面是通过正则表达式验证的方法：isValidIpv4Addr(ip) { const newIP = ip.trim(); return /^(?=\d+\.\d+\.\d+\.\d+$)(?:(?:25[0-5]|2[0-4][0-9]|1[0-9]{2}|[1-9][0-9]|[0-9])\.?){4}$/.test(...
mat-autocomplete 设置默认值
2020年12月12日
最近在使用Angular Material的时候，mat-autocomplete的内容需要从后端数据库读取，如果在修改mat-autocomplete的时候，如何显示默认值呢？首先需要设置formControl的值：this.cityFormControl.setValue({city: res.city});之后通过[displayWith]设置显示值，这是一个：将选项的控制值映射到触发器中的...
Angular Dialog组件交互总结
2020年11月19日
最近后台项目存在大量的表单，使用的是Angular和material的框架。后台涉及到大量的增删查改，这里的修改和删除使用的是MatDialog组件。经过大量的使用，将一些规范和认识总结下来，方便以后的项目规范和标准化。修改事件：editNotification($event, id: number): void { const dialogRef = this.dialog.open(No...
It looks like you're using ngModel on the same form field as formControl
2020年11月18日
在使用Angular表单的时候出现了如下警告⚠：It looks like you're using ngModel on the same form field as formControl.Support for using the ngModel input property and ngModelChange event with reactive form directives has ...
Angular subscribe loading
2020年11月17日
最近在使用Angular rxjs的时候，获取数据的时候，页面显示增加加载，代码如下：article.component.html<div class="page-loading" *ngIf="isLoading$ | async"> <mat-spinner></mat-spinner></div><table *ngIf="!(isLoading$ | async)" mat-tabl...
Angular 提交 按钮加载，button 加载mat-spinner动画
2020年11月16日
最近在使用Angular，每当修改内容提交的时候，禁止用户再次点击，这个时候需要将按钮变成disabled状态。具体实现效果如下：具体代码如下：css样式：@keyframes spinner { to {transform: rotate(360deg);}}.spinner:before { content: ''; box-sizing: border-box; position: ...