angular7项目实战常见填坑方法

阳光穿透心脏的1/2处 2022-01-11 08:11 250阅读 0赞

#### 对响应式表单设置默认值 ####

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的页数的时候，然后点击检索，希望的结果是检索出来跳转到第一页，实际要么没数据了，要么还在后面的当前页中。

1.  在html中的检索方法可以传递一个参数

1.  在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

<ng-container *ngIf="userType === 1">
        <li [routerLinkActive]="['active']">
            <a [routerLink]="[ '/engineerHome' ]">首页</a>
        </li>
        <li [routerLinkActive]="['active']" >
            <a [routerLink]="[ '/engineerFaultManage' ]">管理</a>
        </li>
    </ng-container>

#### 获取当前激活的路由及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;
    }

<div nz-col nzSpan="12">
        <nz-form-item>
            <nz-form-label [nzSpan]="7" nzRequired>设备编号</nz-form-label>
            <nz-form-control [nzSpan]="17">
                <input [readonly]="isDisabled" nz-input formControlName="equiCode" />
                <nz-form-explain *ngIf="(validateForm.get('equiCode')?.dirty && validateForm.get('equiCode')?.errors)">
                    <ng-container *ngIf="validateForm.get('equiCode')?.hasError('required')">
                        设备编号不能为空！
                    </ng-container>
                </nz-form-explain>
            </nz-form-control>
        </nz-form-item>
    </div>

#### 表单去除前后空格 ####

html

// 去除空格
    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, '');
    }