angular 7プロジェクトでよくある質問のまとめ

生产禁止specテストファイル

方法1:
コマンド作成時に--no-specを追加

ng generate component my-component --no-spec

方法2:
アンコールで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

//ページングバグを解決し、データを削除する問題を解決し、最後のページは1つのデータのみ削除前のページにジャンプする

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ファイルに同じ要素をアップロードすると、1回だけ問題がトリガーされます。

 
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;
}