Nicht in der Lage Daten zu binden, die von einem Objekt in Angular 2

Question

I in Angular 2 eine Schnittstelle zu sehen wie folgt -

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; 
} 

Ich habe eine Service-Methode in einem meiner Dienste wie folgt -

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); 
} 

ich den Dienst von meiner Komponente nenne wie folgt -

//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))); 

Wo contactDataItem ist eine Variable vom Typ Kontakt Informationsmodell, erklärt wie diese -

contactDataItem : ContactInformationModel; 

Wenn ich die Anwendung ausführen, kann ich auf der Konsole sehen, dass der Dienst ein Objekt zurückgibt, das wie folgt aussieht -

{ 
    "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" 
} 

aber wenn ich zu binden bin versucht, die Eigenschaften dieses Objekts zu meinem Tisch, dann wird es nicht gebunden.

<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> 

Auch, bitte informiert, dass, wenn ich bin einfach ein hartcodiertes Objekt auf dem Variable contactDataItem und Bindung es zu dem dann der Bindung erfolgreich zuweisen. Was mache ich falsch? Jede Hilfe wäre willkommen.

Danke, Amit Anand

Answer 1

könnten Sie versuchen, die Daten Eigenschaft zugreifen.

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); 
} 

aus dem Winkel docs:

Erwarten Sie nicht, das entschlüsselte JSON direkt die Helden Array sein. Dieser Server umschließt JSON-Ergebnisse immer in einem Objekt mit einer Dateneigenschaft. Sie müssen es auspacken, um die Helden zu bekommen. Dies ist ein herkömmliches Web-API, das von Sicherheitsbedenken getrieben wird.

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