angular7项目中常见问题总结

禁止生产.spec测试文件

方法一：

在使用命令创建的时候后面添加 --no-spec

ng generate component my-component --no-spec

方法二：

在angular.json文件中永久禁用，直接编辑schematics节点。

"schematics": {
  "@schematics/angular:component": {
      "styleext": "scss",
      "spec": false
    },
    "@schematics/angular:class": {
      "spec": false
    },
    "@schematics/angular:directive": {
      "spec": false
    },
    "@schematics/angular:guard": {
      "spec": false
    },
    "@schematics/angular:module": {
      "spec": false
    },
    "@schematics/angular:pipe": {
      "spec": false
    },
    "@schematics/angular:service": {
      "spec": false
    }
}

滚动条

• 在页面中使用多个滚动条的时候应该给对应的div设置不同的类名，避免使用同一个类名导致不起效果。
• 滚动条加载缓慢，如果放到对应的钩子函数里面还是没有效果，可以放在数据请求成功之后初始化滚动条。

表格设置固定行高和不换行

.ant-table-thead > tr > th, 
.ant-table-tbody > tr > td
    padding 4px 3px
    text-align center
    border-right .1em solid #eee
    color #444
    word-break break-all
    font-size 12px
    height 37px
    word-break keep-all
    white-space nowrap

// 解决分页bug,删除数据问题,最后一页只有一条数据删除跳转前一页

if (this.searchCondition.pageIndex > 1) {
   if (this.totalCount % this.searchCondition.pageSize === 1) {
       this.searchCondition.pageIndex--;
       this.getCreateOrderList();
   }
}

angular ajax请求问题

https://blog.csdn.net/luckylqh/article/details/81055591

清除对象里面的值

for (const key in this.knowledgeDetail) {
   this.knowledgeDetail[key]  = '';
}

input file文件上传同一个元素只能触发一次问题

在上传成功之后让里面的值为空
that.fileUploadImg.nativeElement.value = '';

模块化开发只引入一次外部组件

在angular模块化开发的过程中，模块之间是相互独立的，如果想要引入模块外面的组件，可以通过将相应的组件放到一个共享模块中，然后将组件从共享模块中导出，最后在使用改组件的模块中引入共享模块即可。

有些时候不仅使用自定义的组件，还使用第三方模块，可以按照同样的逻辑，将第三方模块引入到共享模块中，然后在共享模块中导出，最后需要使用的模块中引入该共享模块，就可以使用了。

import { NgZorroAntdModule } from 'ng-zorro-antd';

imports: [
        CommonModule,
        SharedRoutingModule,
        NgZorroAntdModule,
        FormsModule,
        QuillModule
    ],
    exports: [
        HeaderComponent,
        RichTextComponent,
        NgZorroAntdModule
    ]

angular中清空对象里面属性的值

方式1：

formData = {
    areaName: {
        ProvinceAreaGUID: 'f9389ddb-ee56-4baa-b6d8-b89e71afb2b8',
        CityAreaGUID:  '8f978608-ec64-4378-8241-468b63e622d9',
        CountyAreaGUID:  '1417a632-3f97-4555-9d79-a00875dc20b3'
    }
}

this.formData.areaName.CountyAreaGUID = null;

方式2：

// 对象
    addBaseFileModal: any = {
        fileTypeRadioValue: 11,
        // 传递给添加设备基础文件的RelationGUID
        equipBaseFileRelationGUID: '',
        docName: '',
        base64fileType: '',
        base64File: '',
        uploadUserGUID: sessionStorage.getItem('userGUID'),
        remark: ''
    };

 // 清除对象里面的值，为其他不需要清空的赋值
    addEquipBaseFileModelClose() {
        Object.keys(this.addBaseFileModal).forEach((key) => {
            this.addBaseFileModal[key] = '';
        });
        this.addBaseFileModal.fileTypeRadioValue = 11;
    }

对象的拷贝并删除指定项

// 表单数据
formData = {
    equiCode: '',
    fertilizerSite: '', 
    equiName: '', 
    equiType: '',
    equipTypeRadioValue: 0
};

// 拷贝对象
const formDataCopy = JSON.parse(JSON.stringify(this.formData));

// 删除对象
Object.keys(formDataCopy).forEach((key) => {
    delete formDataCopy['Remark'];
    delete formDataCopy['detailAdress'];
    delete formDataCopy['equipRelationGUID'];
});

动态显示字体样式

{{item.IsEmergentDisplay}}

.isEmergent0 {
    color: #009933;
}

.isEmergent1 {
    color: #333333;
}