如何使用 Angularjs 2 中的接口为复杂的 JSON 对象创建模型

Question

我必须使用接口而不是 class 为复杂的 JSON 对象创建模型。

请帮忙排除编译错误。我正在尝试在我的 ICTCompanyDetails 接口中扩展 Address 接口。但是在组件中创建模型时。它给我编译错误。

接口是：

import { ICTAddress               } from '../../../generic/address';
    export interface ICTCompanyDetails extends ICTAddress{
    ct_company_id                       :string;
    ct_company_owner_name               :string;
    ct_company_name                     :string;
    ct_company_address                  :ICTAddress[];
    ct_company_email_id                 :string;
    ct_company_mobile_no                :string;
    ct_company_phone_no                 :string;
    ct_company_gst_no                   :string;
    ct_company_pan_no                   :string;
    ct_company_website                  :string;
    ct_company_sac_code                 :string;
    ct_company_logo_name                :string;
    //ct_company_logo                     :File;
    ct_company_digital_sign_stamp_name  :string;
    //ct_company_digital_sign_stamp       :File;
    ct_company_term_condition           :string;
    ct_company_revoke                   :string;
    ct_company_status                   :string;
    ct_company_last_update_datetime     :Date;
    ct_company_last_update_ip           :string;
    ct_company_last_update_login_id     :string;
    }
        export interface ICTAddress{
        ct_address_id   :string;
        ct_address_1    :string;
        ct_address_2    :string;
        ct_address_3    :string;
        ct_country      :string;
        ct_state        :string;
        ct_town_n_city  :string;
        ct_postal_code  :string;
       }

Model is:

company: ICTCompanyDetails = {
        ct_company_id                       : "",
        ct_company_owner_name               : "",
        ct_company_name                     : "",
        ct_company_address                  : ICTAddress [ 
            ct_address_id   :"",
            ct_address_1    :"",
            ct_address_2    :"",
            ct_address_3    :"",
            ct_country      :"",
            ct_state        :"",
            ct_town_n_city  :"",
            ct_postal_code  :"",
        ],
        ct_company_email_id                 : "",
        ct_company_mobile_no                : "",
        ct_company_phone_no                 : "",
        ct_company_gst_no                   : "",
        ct_company_pan_no                   : "",
        ct_company_website                  : "",
        ct_company_sac_code                 : "",
        ct_company_logo_name                : "",
        //ct_company_logo: new File([], ""),
        //ct_company_logo                     :new Blob([], { type: '' }),
        ct_company_digital_sign_stamp_name  : "",
        //ct_company_digital_sign_stamp: new File([], ""),
        //ct_company_digital_sign_stamp       :new Blob([], { type: '' }),
        ct_company_term_condition           : "",
        ct_company_revoke                   : "",
        ct_company_status                   : "",
        ct_company_last_update_datetime     : new Date(),
        ct_company_last_update_ip           : "",
        ct_company_last_update_login_id     : ""
    };

Answer 1

在您的组件中使用此代码：

company: ICTCompanyDetails = {
        ct_company_id                       : "",
        ct_company_owner_name               : "",
        ct_company_name                     : "",
        ct_company_address                  : [ 
            ct_address_id   :"",
            ct_address_1    :"",
            ct_address_2    :"",
            ct_address_3    :"",
            ct_country      :"",
            ct_state        :"",
            ct_town_n_city  :"",
            ct_postal_code  :"",
        ],
        ct_company_email_id                 : "",
        ct_company_mobile_no                : "",
        ct_company_phone_no                 : "",
        ct_company_gst_no                   : "",
        ct_company_pan_no                   : "",
        ct_company_website                  : "",
        ct_company_sac_code                 : "",
        ct_company_logo_name                : "",
        //ct_company_logo: new File([], ""),
        //ct_company_logo                     :new Blob([], { type: '' }),
        ct_company_digital_sign_stamp_name  : "",
        //ct_company_digital_sign_stamp: new File([], ""),
        //ct_company_digital_sign_stamp       :new Blob([], { type: '' }),
        ct_company_term_condition           : "",
        ct_company_revoke                   : "",
        ct_company_status                   : "",
        ct_company_last_update_datetime     : new Date(),
        ct_company_last_update_ip           : "",
        ct_company_last_update_login_id     : ""
    };

我刚刚编辑了 ct_company_address。希望对你有帮助。

Answer 2

修复后我得到了结果：

ct_company_address                  : [
  { ct_address_id   : '' },
  { ct_address_1    : '' },
  { ct_address_2    : '' },
  { ct_address_3    : '' },
  { ct_country      : '' },
  { ct_state        : '' },
  { ct_town_n_city  : '' },
  { ct_postal_code  : '' }
] as ICTAddress[],

完整版：

https://plnkr.co/edit/bcjMU9eVcWOnO7tIcqhV?p=preview

如何使用 Angularjs 2 中的接口为复杂的 JSON 对象创建模型

How to create model using interface in Angularjs 2 for complex JSON object

angular

angular-forms