Angular2：错误：未定义

无法读取属性的名字“我有类似：Angular2：错误：未定义

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":"[email protected]","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"}]

getCoworker在user.servie工作正常（在邮递员返回JSON）但是，当我打电话onViewCoworker（coworker.id）在模板中，控制台打印：

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

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

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

来源

2017-08-24 Lucas Dmnt

你能发布来自userService.getCoworker的json响应吗？ – LLai

@LLai post编辑 –

它看起来像json正在数组中返回。因此要显示{{worker.name}}，您需要访问数组的第一个对象。 .subscribe（worker => this.worker = worker [0]） – LLai

在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映射到任何东西。它本质上是将一个Json对象发送给Subscribe()方法。所以，理论上你试图从Json读取.name。

来源

2017-08-24 21:20:55

Angular2：错误：未定义

回答

相关问题