Angular2 - लेखन त्रुटि: (टाइपप्रति) में गुण अपरिभाषित की 'id' पढ़ा नहीं जा सकता

Question

मैं निम्न त्रुटि हो रही है:

//Product-edit.component.ts: 

import {Component } from 'angular2/core'; 
import { IProduct } from './product' 
import { ProductService } from './product.service' 
import { RouteParams } from 'angular2/router'; 
@Component({ 
    template:`<div class="wrapper wrapper-content animated fadeInRight ecommerce"> 
       {{ product.Id }} 
      </div>`, 
}) 
export class ProductEditComponent{ 
    product: IProduct = null; 
    errorMessage: string; 
    constructor(private _routeParams: RouteParams, private _productService: ProductService){ 

    } 

    ngOnInit(): void { 
     this._productService.getProduct(this._routeParams.get('id')) 
      .subscribe(
       product => this.product = product, 
       error => this.errorMessage = <any>error); 


    } 

} 

ProductService:

getProduct(id: string): Observable<IProduct> { 
    return this._http.get(this._baseUrl + this._getProductUrl + '/' + id) 
     .map((response: Response) => <IProduct>response.json()) 
     .do(data => console.log("All: " + JSON.stringify(data))) 
     .catch(this.handleError); 
} 

angular2.dev.js:23925 EXCEPTION: TypeError: Cannot read property 'Id' of null in [ 


{{ product.Id }} 
in ProductEditComponent@0:68] 

साथ फेंक दिया

सर्वर से प्रतिक्रिया:

{"Id":"34d4efcy6","ExternalId":null,"UserId":"testing","ProductProvider":null,"Title":"Flaska vin","Desc":null,"MinDeliveryTime":null,"MaxDeliveryTime":null,"FreightCost":null,"Brand":null} 

मैं क्या गड़बड़ कर रहा हूँ?

Answer 1

अपने घटक में, आप product को शून्य में प्रारंभ कर रहे हैं, और फिर अपने टेम्पलेट में product.Id का संदर्भ दे रहे हैं। त्रुटि तब होती है जब कोणीय आपके एसिंक कॉल रिटर्न से पहले आपके टेम्पलेट को शुरू करने का प्रयास करता है - जिस बिंदु पर product अभी भी शून्य है, इस प्रकार त्रुटि: Cannot read property 'Id' of null।

सबसे तत्काल समाधान Elvis operator का उपयोग करना है, जो कोणीय इस तरह की स्थितियों के लिए प्रदान करता है। आप अपने टेम्पलेट में {{ product?.Id }} के साथ {{ product.Id }} को प्रतिस्थापित करके इसका उपयोग करेंगे।

कहा कि आप इस दृष्टिकोण के साथ परिवर्तन का पता लगाने समस्याएं आ होने की संभावना हो, और सामान्य रूप में आप ज्यादा की तरह एक दृष्टिकोण के साथ बेहतर हो जाएगा:

export class ProductEditComponent{ 
    product: Observable<IProduct>; //product is an Observable 
    errorMessage: string; 
    constructor(private _routeParams: RouteParams, private _productService: ProductService){ 
    //product is always defined because you instantiate it in the ctor 
    this._productService.getProduct(this._routeParams.get('id')); 
    } 

फिर आप में {{(product | async).Id }} का उपयोग करेंगे अपने टेम्पलेट में {{product.Id}} की जगह, AsyncPipe लीवरेज करने के लिए कोणीय को आपके लिए आवश्यक यूआई की सदस्यता लेने और अपडेट करने की गंदगी को संभालने दें।