返されたオブジェクトをクライアント角度変数に割り当てるときのエラー

Question

サーバーからオブジェクトを返すときに、オブジェクトを角度コンポーネントオブジェクトの変数に割り当てるときに例外が発生します。誰かが私が行方不明を知っていますか？

製品component.ts

import { Component, OnInit } from '@angular/core'; 
import { Product } from './product'; 
import { ProductsService } from './products.service'; 
import { ActivatedRoute, Params } from '@angular/router'; 
import { Observable } from 'rxjs/Observable'; 
import 'rxjs/add/observable/of'; 
import 'rxjs/add/operator/switchMap'; 
import 'rxjs/add/operator/map'; 

@Component({ 
    selector: 'product', 
    templateUrl: './app/products/product.component.html' 
}) 
export class ProductComponent implements OnInit { 
    data: Product; 

    constructor(private productSrv: ProductsService, 
       private route: ActivatedRoute) {} 

    ngOnInit() { 
     this.route.params.map(params => params['id']).subscribe(
      id => { 
       if (id) 
        this.productSrv.obtainProduct(+id).subscribe(
          product => { 
           console.log(product); 
           this.data = <Product>product; 
          }, 
          error => console.log(error)); 
       else 
        this.data = <Product> { 
          id: 0, 
          name: '', 
          code: '' 
         }; 
      }, 
      error => console.log(error)); 
    } 
} 

製品-service.ts

import { Product } from './product'; 
import { PagingDetails } from './paging-details'; 
import { Injectable } from '@angular/core'; 
import { Http, Response, Headers, RequestOptions, URLSearchParams } from '@angular/http'; 
import { Observable } from 'rxjs/Observable'; 
import 'rxjs/add/operator/catch'; 
import 'rxjs/add/operator/map'; 

@Injectable() 
export class ProductsService { 

    constructor(private http: Http) { } 

    obtainProduct(id: number): Observable<Product> { 
     return this.http.get('/srv/product/' + id) 
         .map(this.extractData2) 
         .catch(this.handleError); 
    } 

    private extractData2(res: Response): Product { 
     let body = res.json(); 
     console.log(body); 
     return <Product> (body || {}); 
    } 

    private handleError(error: Response | any) { 
     // In a real world app, you might use a remote logging infrastructure 
     let errMsg: string; 
     if (error instanceof Response) { 
      const body = error.json() || ''; 
      const err = body.error || JSON.stringify(body); 
      errMsg = `${error.status} - ${error.statusText || ''} ${err}`; 
     } else { 
      errMsg = error.message ? error.message : error.toString(); 
     } 
     console.error(errMsg); 
     return Observable.throw(errMsg); 
    } 
} 

product.ts

export interface Product { 
    id: number; 
    name: string; 
    code: string; 
} 

例外

Answer 1

私はこの問題を再現できたので、Firefoxではヌル/未定義の値を守らないとco.エラーが発生しているようです。この場合、dataが定義されていないので、この場合はco.dataです。あなたはおそらく、あなたのテンプレートでこれを使用しようとして例えば

<div>{{data.code}}</div> 

とテンプレートがレンダリングされた時点で、データがundefinedですされています。テンプレートのセーフナビゲーションオペレータを使用して解決できます。

<div>{{data?.code}}</div> 

...または*ngIfその他の情報：Cannot read property "totalPrice" of undefined

これを解決すると、代わりにundefinedがコンソールに表示されます。問題は、あなたの購読で鋳造です：

.subscribe(product => { 
    console.log(product); 
    this.data = <Product>product; // here 
} 

これは一見undefinedするdataの原因となります。 dataに既にProductとマークされているので、キャストを削除します。したがって、単純に次のように変更してください：

.subscribe(product => { 
    console.log(product); 
    this.data = product; // here 
} 

このようにすれば、問題は解決します。サブスクリプションを変更してdataが未定義にならないようにしても、http-requestが非同期でテンプレートの安全なナビゲーション演算子などを使用してnull /未定義の値を保護する必要があります。レンダリングされたdataは未定義です。