前沿web开发框架

Angular

Angular 是一个开发平台。它能帮你更轻松的构建 Web 应用。Angular 集声明式模板、依赖注入、端到端工具和一些最佳实践于一身,为你解决开发方面的各种挑战。Angular 为开发者提升构建 Web、手机或桌面应用的能力。

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: ...

mat-table 如何设置Index

2020年11月11日

最近在使用Angular Material的mat-table的时候,需要设置表格的编号。具体代码如下:表头设置:displayedColumns: string[] = ['index'];之后设置index列:<ng-container matColumnDef="index"> <th mat-header-cell *matHeaderCellDef> No.</th> <td...

mat-table 刷新数据源

2020年11月09日

最近在使用Angular Material的时候,使用mat-table修改表格,数据不同步更新。delete($event, id, root, section, child): void { const dialogRef = this.dialog.open(MenuDialogComponent, { width: '20vw', data: {id, r...