将返回的对象分配给客户端角度变量时出错

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将是未定义的。