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

时间:2017-12-27 07:03:51

标签: angular angular-forms

我必须使用接口创建模型,而不是按类来创建复杂的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     : ""
    };

2 个答案:

答案 0 :(得分:0)

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

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。 希望它会有所帮助。

答案 1 :(得分:0)

修复后我得到了结果:

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