Angular2：错误：无法读取未定义的属性“名称”答案

【问题标题】：Angular2: Error: Cannot read property 'name' of undefinedAngular2：错误：无法读取未定义的属性“名称”
【发布时间】：2017-08-25 05:29:18
【问题描述】：

我有类似的东西：

account.component.ts

getCoworker(id:number){
  this.userService.getCoworker(id)
    .subscribe(
      worker => this.worker = worker
   )
}

onViewCoworker(id){
  this.getCoworker(id);
}

account.component.html

<div *ngIf="viewCoworkers" class="container">
<div class="row">
    <div class="col s12">
      <ul class="collection">
        <a (click)="onViewCoworker(coworker.id)" *ngFor="let coworker of coworkers" class="collection-item avatar valign-wrapper" id="coworker{{coworker.id}}">
          <span class="title">{{coworker.name}} {{coworker.surname}}</span>
          <p>{{coworker.job}}</p>
        </a>
      </ul>
    </div>
</div>

<div *ngIf="viewCoworker" class="container">
<div class="row">
<div class="col s12 center-align">
  <div class="card center-align">
      <div class="card-title">{{worker.name}}</div>
  </div>
</div>

user.service.ts

getCoworker(id:number):Observable<User[]>{
  const token = this.authService.getToken();
  let url = 'http://localhost:8000/api/coworker/' + id + '?token=';
  return this.http.get(url+token)
    .map(res=> res.json())
    .catch(this.handleError)
}

json 响应

[{"id":25,"name":"lulu","surname":"lu","email":"test@test.com","phone":"0606060606","number":1102,"street":"rue de ketazi","zip":"31200","city":"London","job":"developpeur web","skills":null,"project":"ketaz party","avatarPath":null,"birthDate":null,"inscriptionDate":null,"status":null,"disabledDate":"1970-01-01","role":null,"password":"$2y$10$zyCtW4U73TPy8orLO58yieorKS\/4DezqL.P6VZs66LSYyHuzC9YJK","fidelityPoint":12,"remember_token":null,"created_at":"2017-08-21 19:05:44","updated_at":"2017-08-24 12:59:56"}]

user.servie 中的 getCoworker 工作正常（在邮递员中返回 json）但是当我在模板中调用 onViewCoworker(coworker.id) 时，控制台打印：

EXCEPTION: Error in ./AccountComponent class AccountComponent - inline template:154:34 caused by: Cannot read property 'name' of undefined

我试过 {{worker?.name}} ：没有更多错误，但没有数据显示。

不知何故，它不返回“工人”。我想我错过了什么？

【问题讨论】：

你能发布来自 userService.getCoworker 的 json 响应吗
@LLai 帖子已编辑
看起来 json 是在一个数组中返回的。因此，要显示 {{worker.name}} 您需要访问数组的第一个对象。 .subscribe(worker => this.worker = worker[0])
LLai 谢谢回答，但我仍然遇到同样的错误
模板中的 {{worker[0].name}} 成功了……谢谢@LLai

标签： angular

【解决方案1】：

在您的 user.service.ts 中试试这个

getCoworker(id: number): Observable < User > {
  const token = this.authService.getToken();
  let options: RequestOptions = new RequestOptions();
  let headers: Headers = new Headers();
  //headers.append("key", value);
  options.headers = headers;

  options.params = new URLSearchParams();
  options.params.append("token", token);

  let url = 'http://localhost:8000/api/coworker/' + id;
  return this.http.get(url, options)
    .map((res: any) => res.json() as User)
    .catch(err: Response) => Observable.throw(this.handleError /* or method that can use the content of the err variable. 404 page perhaps */ ));
}

如果您只期望来自该请求的单个用户对象，则不需要返回类型为数组。

这可能是因为您的 .map() 没有将 Json 映射到任何东西。它本质上是向Subscribe() 方法发送一个Json 对象。因此，理论上，您试图从 Json 中读取 .name。

【讨论】：