Question

我在Angular 2中有一个接口，如下所示 -

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

我在我的一项服务中有一个服务方法，如下所示 -

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

我从我的组件调用服务，如下所示 -

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

其中contactDataItem是ContactInformationModel类型的变量，声明如下 -

contactDataItem : ContactInformationModel;

当我运行应用程序时，我可以在控制台上看到该服务正在返回一个如下所示的对象 -

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

但是当我试图将这个对象的属性绑定到我的表时，它就没有被绑定。

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

另外，请注意，当我只是将一个硬编码对象分配给变量contactDataItem并将其绑定到那时，绑定就成功了。我究竟做错了什么？任何帮助将不胜感激。

谢谢，阿米特阿南德

Answer 1

您可以尝试访问数据属性。

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

来自Angular docs：

不要期望解码的JSON直接成为英雄阵列。这个服务器始终将JSON结果包装在具有data属性的对象中。你必须解开它以获得英雄。这是传统的Web API 由安全问题驱动的行为。

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

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

1 个答案: