將返回的對象分配給客戶端角度變量時出錯

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.錯誤，在這種情況下，co.data由於data未定義。你可能想在你的模板中使用這個，e.g

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

這個看似導致data是undefined。因爲您已將data標記爲Product類型，所以請移除鑄件。所以將其改爲：

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

因此，上述應解決您的問題。即使您在訂閱中進行了更改，以便data不會未定義，但您必須通過使用模板中的安全導航運算符來保護空值/未定義值，因爲http請求是異步的，並且在模板爲呈現data將是未定義的。