无法绑定数据以从Angular 2中的对象查看

Question

I have a interface in Angular 2 as follows -

export interface ContactInformationModel {
    EmailAddress : string;
    DirectPhone : string;
    Extension : string;
    DirectFax : string;
    RemoteFax : string;
    PersonalEmail : string;
    HomePhone : string;
    CellPhone : string;
    Birthday : string;
    Address : string;
    PrimaryEmergencyContact : string;
    PrimaryEmergencyContactCellPhone : string;
    SecondaryEmergencyContact : string;
    SecondaryEmergencyContactCellPhone : string;
}

I have a service method in one of my services as follows --

public getContactInformation(Id: any): Observable<ContactInformationModel> {
        console.log('Service - ContactService - Method - getContactInformation - Params - Id  : ' + Id);
        this._requestOptions = new RequestOptions({
            method: RequestMethod.Post,
            url: this.contactInformationUrl,
            headers: this.headers,
            body: JSON.stringify(Id)
        });
        console.log('POST Query for Contact Information : ' + JSON.stringify(this._requestOptions));
        return this._http.request(new Request(this._requestOptions)).map(this._httpExtractDataService.extractData).catch(this._httpErrorHandlerService.handleError);
}

I am calling the service from my component as follows --

//Get Contact Information
this._employeeFilesService.getEmployeeContactInformation(this.selectedEmployeeId).subscribe(
    data => this.contactDataItem = data,
    error => this._errorLoggerService.logError(error, "Contact Information Component"),
    () => console.log('Contact Information Received In Information Component -' + JSON.stringify(this.contactDataItem)));

Where contactDataItem is a variable of type ContactInformationModel, declared like this -

contactDataItem : ContactInformationModel;

When I run the application, I can see on console that the service is returning an object that looks like follows -

{
    "EmailAddress":"myofficeemail@email.com",
    "DirectPhone":"000-000-0000",
    "Extension":"0000",
    "DirectFax":"000-000-0000",
    "RemoteFax":"000-000-0000",
    "PersonalEmail":"mypersonalemail@email.com",
    "HomePhone":"000-000-0000",
    "CellPhone":"000-000-0000",
    "Birthday":"2017-05-10",
    "Address":"My Address",
    "PrimaryEmergencyContact":"Contact Person Name",
    "PrimaryEmergencyContactCellPhone":"000-000-0000",
    "SecondaryEmergencyContact":"Contact Person Name",
    "SecondaryEmergencyContactCellPhone":"000-000-0000"
}

but when I am trying to bind the properties of this object to the of my table, then it is not getting binded.

<tbody>
    <tr><td><b>Email Address</b></td><td>{{contactDataItem?.EmailAddress}}</td></tr>
    <tr><td><b>Direct Phone</b></td><td>{{contactDataItem?.DirectPhone}}</td></tr>
    <tr><td><b>Extension</b></td><td>{{contactDataItem?.Extension}}</td></tr>
    <tr><td><b>Direct Fax</b></td><td>{{contactDataItem?.DirectFax}}</td></tr>
</tbody>

Also, please be informed that when I am simply assigning a hardcoded object to the variable contactDataItem and binding it to the then the binding is successfull. What am I doing wrong ? Any help would be appreciated.

Thanks, Amit Anand

Answer 1

You could try accessing the data property.

    getMovie(id: number): Observable<IMovie> {
    const url = `${this.moviesUrl}/${id}`;
    return this.http.get(url)
        .map((res: Response) => {
            const body = res.json();
            return <IMovie>body.data || {};
        })
        .do(data => console.log(JSON.stringify(data)))
        .catch(this.handleError);
}

From the Angular docs:

Don't expect the decoded JSON to be the heroes array directly. This server always wraps JSON results in an object with a data property. You have to unwrap it to get the heroes. This is conventional web API behavior, driven by security concerns.

https://angular.io/docs/ts/latest/guide/server-communication.html