Angular2：エラー：未定義

Question

のプロパティを読み取ることができません '名前' 私はのようなもの持ってきました：

account.component.ts

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

account.component.html

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

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

を

<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を返す） しかし、私は（coworker.id）onViewCoworkerを呼び出すときテンプレートでは、コンソールプリント：

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

私は{{worker？.name} }：それ以上のエラーは表示されませんが、データは表示されません。

どうにかして "ワーカー"が返されません。 何か不足していると思いますか？

Answer 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を何かにマッピングしていなかったために、それがスローされた可能性があります。本質的には、JsonオブジェクトをSubscribe()メソッドに送信しています。だから理論的には、あなたはJsonから.nameを読もうとしていました。