如何在模型中赋值，从angular2中的订阅中从json响应中检索

Question

我从订阅服务器获得了正确的json响应，但无法将值分配给表单文本字段。请查看下面的代码。

HTML代码：-

    <form class="inline-horizontal" (ngSubmit)="updateCompanyDettails(company)" #companyDetailsOverlayForm="ngForm">
                                    {{diagnostic}} 
                                    <div class="row">
                                        <div class="col-lg-12">
                                            <h1 class="page-header">Company Detail</h1>
                                        </div>
                                        <div class="col-lg-6">
                                            <div class="form-group row">
                                                <label class="control-label col-sm-4" for=" ct_company_id">Company ID</label>
                                                <div class="col-sm-7">
                                                    <input [(ngModel)]="company.ct_company_id" id="ct_company_id" name="ct_company_id" #company.ct_company_id="ngModel" pattern="[a-zA-Z][a-zA-Z ]+"
                                                      type="text" class="form-control" required>
                                                </div>
                                                {{company.ct_company_id}}
                                            </div>    

这是组件代码：-

        import { Component } from '@angular/core';
        import { ICTCompanyDetails } from './companydetails';
        import { CompanyDetailsService } from './companydetailsservice';
        import { CompanyDetailsComponent } from './companydetails.component';
        import { PaginationService } from './commonpagination';

        @Component({
            selector: 'company-popup',
            templateUrl: 'companydetailsoverlay.html'
        })

        export class CompanyDetailsPopUp {

            private company: ICTCompanyDetails = {
                    ct_company_id: "",
                    ct_company_owner_name: "",
                    ct_company_name: "",
                    ct_company_address: "",
                    ct_company_country: "",
                    ct_company_state: "",
                    ct_company_town_n_city: "",
                    ct_company_postalcode: "",
                    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_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: ""
                };

getCompanyDetails(company_id: string): void {
                    this.comDetailsService.getCompanyDetails(company_id).
                        subscribe(
                        company => { company = company;
                            //error => this.errorMessage = error,
                            this.company.ct_company_id = company[0]['ct_company_id'];
                            console.log(JSON.stringify(company));
                            console.log("this.company.ct_company_id : " + company[0]['ct_company_id']);
                        });
                        //this.company.ct_company_id = company[0]['ct_company_id'];        
                }
            }

Answer 1

您能尝试像这样将响应转换为接口吗？

import { Response } from '@angular/http';

this.comDetailsService.getCompanyDetails(company_id).
    subscribe( (company: Response) => 
       {
          let ct_company = company.json() as ICTCompanyDetails;
          this.company = ct_company;
          // or with your way only update spesific fields
          this.company.ct_company_id = ct_company.ct_company_id;

          // if returned data is really in list then 
          // let ct_company_list = company.json() as ICTCompanyDetails[];
          // this.company = ct_company_list[0];
          // ...
          // and return variable name should be companies if it is list. Just readability thing.
       }

为什么会有这样的#company.ct_company_id="ngModel"，如果您不想进行双维绑定，那么(ngModel)="company.ct_company_id"就足够了。

<input [(ngModel)]="company.ct_company_id" id="ct_company_id" name="ct_company_id" #company.ct_company_id="ngModel" pattern="[a-zA-Z][a-zA-Z ]+" type="text" class="form-control" required>