Angular 2属性绑定显示`[object Object]`

时间:2016-09-20 09:20:08

标签: c# angularjs angular

早上好,

我有一个名为CustomerAddressesEditComponent的组件,它实现了OnInit。在这堂课中,我宣布了一些像这样的属性;

address: CustomerAddressEdit;
title: string;
line1: string;
line2: string;
line3: string;
city: string;
region: string;
postcode: string;
country: string;
primary: string;

然后在ngOnInit()内部我通过调用提供的本地化服务来定义每个服务(LOCALISATION_SOURCE是在类声明之前定义的常量);

this.address = this._currentCustomerAddressService.getCurrentCustomerAddress();
this.title =            this._localisationService.localise("Customer-Address-Edit-TitleEdit", LOCALISATION_SOURCE);
this.line1 =            this._localisationService.localise("Customer-Address-Edit-Form-Line1", LOCALISATION_SOURCE);
this.line2 =            this._localisationService.localise("Customer-Address-Edit-Form-Line2", LOCALISATION_SOURCE);
this.line3 =            this._localisationService.localise("Customer-Address-Edit-Form-Line3", LOCALISATION_SOURCE);
this.city =             this._localisationService.localise("Customer-Address-Edit-Form-City", LOCALISATION_SOURCE);
this.region =           this._localisationService.localise("Customer-Address-Edit-Form-Region", LOCALISATION_SOURCE);
this.postcode =         this._localisationService.localise("Customer-Address-Edit-Form-Postcode", LOCALISATION_SOURCE);
this.country =          this._localisationService.localise("Customer-Address-Edit-Form-Country", LOCALISATION_SOURCE);
this.primary =          this._localisationService.localise("Customer-Address-Edit-Form-Primary", LOCALISATION_SOURCE);

然后我将每个(标题除外)绑定到模板上输入的placeholder属性; (address是一个工作正常的对象属性)

<input type="text" id="txtAddr1" class="form-control" name="addr1" [(ngModel)]="address.addr1" #addr1="ngModel" [attr.placeholder]="line1" />
<input type="text" id="txtAddr2" class="form-control" name="addr2" [(ngModel)]="address.addr2" #addr2="ngModel" [attr.placeholder]="line2" />
<input type="text" id="txtAddr3" class="form-control" name="addr3" [(ngModel)]="address.addr3" #addr3="ngModel" [attr.placeholder]="line3" />
<input type="text" id="txtPostcode" class="form-control" name="postcode" [(ngModel)]="address.postcode" #postcode="ngModel" [attr.placeholder]="postcode" />
<input type="text" id="txtCity" class="form-control" name="city" [(ngModel)]="address.city" #city="ngModel" [attr.placeholder]="city" />
<input type="text" id="txtRegion" class="form-control" name="region" [(ngModel)]="address.region" #region="ngModel" [attr.placeholder]="region" />
<input type="text" id="txtCountry" class="form-control" name="country" [(ngModel)]="address.country" #country="ngModel" [attr.placeholder]="country" />
<input type="checkbox" id="cbPrimaryAddress" name="primaryAddress" [(ngModel)]="address.primaryAddress" #primaryAddress="ngModel" /> {{primary}}

但是,cityregionpostcodecountry属性都会在页面上输出[object Object]。我也尝试使用相同的结果将它们直接输出到双花括号的页面上。其他属性都输出正常,不确定导致此问题的原因。

ngOnInit()中,我在定义之前将这些失败的属性记录到控制台,打印undefined但是在定义后记录时,打印了由本地化服务提供的正确值 - 所以我不# 39;不知道为什么这些值没有出现在模板上。

任何人都可以指出我正确的方向 - 这可能是一个生命周期问题吗?

更新 - 本地化签名

export class LocalisationService extends ApplicationService {
    ...
    localise(key: string, sourceName: string): string {
        ...
    }
    ...
}

更新 - 地址属性类型

export class CustomerAddressEdit extends Address {
    customerId: number;
    customer: CustomerEdit;

    primaryAddress: boolean;
}

export class Address extends AuditedEntity {
    addressTypeId: number;
    addressType: AddressType;

    addr1: string;
    addr2: string;
    addr3: string;
    city: string;
    region: string;
    postcode: string;
    country: string;
    geoLocation: any;
}

0 个答案:

没有答案