Angularjs 2 TypeError：无法使用 Http 客户端读取未定义的属性“信息”

Question

自从一个美好的一周以来，我一直在开发一个 angularjs 应用程序。我正在为我的服务构建一个后台应用程序。

我在使用从远程服务器获取的数据时遇到问题。我的应用中有 4 个 http GET 请求，其中 2 个正在获取用户和订单列表，那些工作正常，但另外 2 个，获取用户详细信息和订单详细信息给我同样的错误。

这是我收到的关于用户详细信息的错误：

Console error when trying to display user details

这里是组件（user-details.component.ts）：

import {Component}          from 'angular2/core';
import {ROUTER_DIRECTIVES}  from 'angular2/router';
import {HTTP_PROVIDERS}     from 'angular2/http';

import {UserDetailsModel}   from '../model/user-details.model';
import {UserDetailsService} from '../service/user-details.service';
import {Configuration}      from '../app.constants';

@Component({
    selector: 'user-details',
    templateUrl: 'app/template/user-details.component.html',
    directives: [ROUTER_DIRECTIVES],
    providers: [UserDetailsService, HTTP_PROVIDERS, Configuration]
})

export class UserDetailsComponent {

    errorMessage: string;
    userDetailsModel: UserDetailsModel[];

    constructor (private _userDetailsService: UserDetailsService) { }

    ngOnInit() {
        this.getUserDetails();
    }

    getUserDetails() {
        this._userDetailsService.getUserDetails()
                          .subscribe(
                            userDetailsModel => this.userDetailsModel = userDetailsModel,
                            error => this.errorMessage = <any>error);
    }

}

这里是服务（user-details.service.ts）：

import {Injectable}         from 'angular2/core';
import {Http, Response}     from 'angular2/http';
import {Observable}         from 'rxjs/Observable';

import {UserDetailsModel}  from '../model/user-details.model';
import {Configuration}      from '../app.constants';

@Injectable()
export class UserDetailsService {

    constructor (private _http: Http, private _config: Configuration) {

        this._actionUrl = _config.serverUrl + 'users/40';

    }
    private _actionUrl: string;


    getUserDetails () {
        return this._http.get(this._actionUrl)
                         .map(res => <UserDetailsModel[]> res.json().user)
                         .do(user => console.log(user))
                         .catch(this.handleError);
    }

    private handleError (error: Response) {
        // in a real world app, we may send the error to some remote logging infrastructure
        // instead of just logging it to the console
        console.error(error);
        return Observable.throw(error.json().error || 'Server error');
    }
}

这是模型（user-details.model.ts）：

export class Address {
    constructor (
        public type:                string,
        public address:             string,
        public additional_info:     string,
        public zip_code:            string,
        public city:                string,
        public floor:               number,
        public elevator:            boolean
    ) { }
}

export class Infos {
    constructor (
        public username:    string,
        public email:       string,
        public first_name:  string,
        public last_name:   string,
        public birth_date:  string,
        public gender:      string,
        public telephone:   string
    ) { }
}

export class UserDetailsModel {
  constructor(
    public infos:    Infos[],
    public adresses: Address[]
  ) {  }
}

这是我使用从服务器获取数据的模板的一部分（user-details.template.ts）：

<div class="row">
    <div class="col-lg-3">
        <img class="img-thumbail" src="http://placehold.it/150x150">
        <p>Rating xxxx</p>
    </div>
    <div class="col-lg-3">
        <p>Nom : {{userDetailsModel.infos[0].last_name}}</p>
        <p>Prénom : {{userDetailsModel.infos[0].first_name}}</p>
        <p>Date de naissance : {{userDetailsModel.infos[0].birth_date}}</p>
        <p>Adresse : {{userDetailsModel.adresses[0].address}}</p>
        <p>Code postal : {{userDetailsModel.adresses[0].zip_code}}</p>
        <p>Villee : {{userDetailsModel.adresses[0].city}}</p>
    </div>
    <div class="col-lg-3">
        <p>E-mail : {{userDetailsModel.infos[0].email}}</p>
        <p>Téléphone : {{userDetailsModel.infos[0].telephone}}</p>
        <p>Note moyenne </p>
        <p>Courtoisie</p>
        <p>Donne un coup de main</p>
    </div>
</div>

最后，这是我从 API 调用得到的 json 响应：

{
  "detail": "success"
  "user": {
    "infos": [1]
     0:  {
     "username": "john.doe@domain.com"
     "email": "john.doe@domain.com"
     "first_name": "Johan"
     "last_name": "Doe"
     "birth_date": "1994-07-09T05:00:00.000Z"
     "gender": "M"
     "telephone": "0612365478"
  }-
-
  "adresses": [1]
    0:  {
     "type": "Principal"
     "address": "2 place du chateau"
     "additional_info": null
     "zip_code": "35500"
     "city": "VITRE"
     "floor": null
     "elevator": null
    }-
  -
  }-
}

提前感谢您查看，希望您能帮助我找出我做错了什么。

编辑： 我在包装模板的主目录中添加了一个指令“*ngIf="userDetailsModel"，现在它工作正常。事实上，模板正在运行并尝试在实际的 http 请求完成检索数据之前访问对象属性。

Answer 1

看起来您将 userDetailsModel 定义为 UserDetails 数组：

userDetailsModel: UserDetailsModel[];

如果是这样，你需要在使用时指定一个索引。

userDetailsModel[x].propertyName

否则将其声明为 UserDetailsModel 的实例：

userDetailsModel: UserDetaislModel