Angular2: Probleme beim Anzeigen eines Objekts in einer Vorlage

Question

Ich versuche, ein Produkt anzuzeigen, das ich von einem lokalen Server in einer Vorlage meiner Produktkomponente erhalte. Diese Vorlage soll in der Vorlage meiner app.component angezeigt werden. Ich kann eine productModel Instanz von innerhalb meines app.component.ts Controllers erfolgreich instanziieren, aber wenn ich versuche, das Produkt in einer Tabelle auf meiner app.component.html Vorlage anzuzeigen, erhalte ich den folgenden Fehler: Irgendeine Idee, wo ich nach dem Problem suchen kann?

Mein Fehler:

error_handler.js:48EXCEPTION: Error in ./ProductComponent class ProductComponent - inline template:8:4 caused by: Cannot read property 'Description' of undefinedErrorHandler.handleError @ error_handler.js:48 error_handler.js:50ORIGINAL EXCEPTION: Cannot read property 'Description' of undefinedErrorHandler.handleError @ error_handler.js:50 error_handler.js:53ORIGINAL STACKTRACE:ErrorHandler.handleError @ error_handler.js:53 error_handler.js:54TypeError: Cannot read property 'Description' of undefined at _View_ProductComponent0.detectChangesInternal (component.ngfactory.js:128) at _View_ProductComponent0.AppView.detectChanges (view.js:233) at _View_ProductComponent0.DebugAppView.detectChanges (view.js:338) at _View_AppComponent0.AppView.detectViewChildrenChanges (view.js:259) at _View_AppComponent0.detectChangesInternal (component.ngfactory.js:126) at _View_AppComponent0.AppView.detectChanges (view.js:233) at _View_AppComponent0.DebugAppView.detectChanges (view.js:338) at _View_AppComponent_Host0.AppView.detectViewChildrenChanges (view.js:259) at _View_AppComponent_Host0.detectChangesInternal (host.ngfactory.js:33) at _View_AppComponent_Host0.AppView.detectChanges (view.js:233)ErrorHandler.handleError @ error_handler.js:54 error_handler.js:57ERROR CONTEXT:ErrorHandler.handleError @ error_handler.js:57 error_handler.js:58DebugContextErrorHandler.handleError @ error_handler.js:58 zone.js:388Unhandled Promise rejection: Error in ./ProductComponent class ProductComponent - inline template:8:4 caused by: Cannot read property 'Description' of undefined ; Zone: ; Task: Promise.then ; Value: ViewWrappedError TypeError: Cannot read property 'Description' of undefined at _View_ProductComponent0.detectChangesInternal (/AppModule/ProductComponent/component.ngfactory.js:128:62) at _View_ProductComponent0.AppView.detectChanges (http://localhost:4200/main.bundle.js:56051:14) at _View_ProductComponent0.DebugAppView.detectChanges (http://localhost:4200/main.bundle.js:56156:44) at _View_AppComponent0.AppView.detectViewChildrenChanges (http://localhost:4200/main.bundle.js:56077:19) at _View_AppComponent0.detectChangesInternal (/AppModule/AppComponent/component.ngfactory.js:126:8) at _View_AppComponent0.AppView.detectChanges (http://localhost:4200/main.bundle.js:56051:14) at _View_AppComponent0.DebugAppView.detectChanges (http://localhost:4200/main.bundle.js:56156:44) at _View_AppComponent_Host0.AppView.detectViewChildrenChanges (http://localhost:4200/main.bundle.js:56077:19) at _View_AppComponent_Host0.detectChangesInternal (/AppModule/AppComponent/host.ngfactory.js:33:8) at _View_AppComponent_Host0.AppView.detectChanges (http://localhost:4200/main.bundle.js:56051:14)consoleError @ zone.js:388 zone.js:390Error: Uncaught (in promise): Error: Error in ./ProductComponent class ProductComponent - inline template:8:4 caused by: Cannot read property 'Description' of undefined(…)consoleError @ zone.js:390

Meine Produktkomponente Vorlage:

<table class="table-responsive"> 
<tr> 
<th>Description</th> 
<th>POS Description</th> 
<th>POS Price</th> 
<th>Stock On Hand</th> 
</tr> 
<tr> 
<td>{{product.Description}}</td> 
<td>{{product.POSDescription}}</td> 
<td>{{product.POSPrice}}</td> 
<td>{{product.StockOnHand}}</td> 
</tr> 
</table> 

Meine Produktkomponente Controller:

import { Component, OnInit, Input } from '@angular/core'; 

import { ProductModel } from '../../models/product.model'; 

@Component({ 
    selector: 'app-product', 
    templateUrl: './product.component.html', 
    styleUrls: ['./product.component.css'], 
    host: { 
     class : 'row' 
    } 

}) 
export class ProductComponent implements OnInit { 
    @Input() product: ProductModel; 

    constructor() { } 

    ngOnInit() { 
    } 

} 

Meine app.component Vorlage:

<div class="row"> 
<div class="col-md-6 col-md-push-3"> 
<form class="form-horizontal" role="form"> 
    <div class="form-group">   
     <input type="number" class="form-control" id="barcode" placeholder="Enter Barcode" #barcode>  
    </div> 
    <button class="btn btn-submit btn-block" (click)="submitBarcode(barcode)">Submit</button> 
</form> 
</div> 
</div> 
<div class="row"> 
    <app-product [product]="product"></app-product>--> 
</div> 

Meine app Component-Controller:

import { Component } from '@angular/core'; 

import { RestService } from "./services/rest.service"; 
import { ProductModel } from "./models/product.model"; 


@Component({ 
    selector: 'app-root', 
    templateUrl: './app.component.html', 
    styleUrls: ['./app.component.css'] 
}) 
export class AppComponent { 

    product: ProductModel; 

    constructor(private restService: RestService){ 

    } 

submitBarcode(barcode: HTMLInputElement){ 

    this.restService.getProduct(barcode.value) 
    .subscribe(
    (res) => { 
     this.product = new ProductModel(res.BaseURI, res.CustomError, res.ProviderName, res.RequestFormData, res.RequestURI, res.ResponseCode, res.AvgQty1, res.AvgQty2, res.AvgQty3, res.BarCode, res.Description, res.POSDescription, res.POSPrice, res.ProductCode, res.PurchCount, res.StockOnHand); 
     console.log("returned product description: " + this.product.Description); 
     //console.log(res); 
    }, 
    (res) => { 
     console.log("failure" + res); 
    } 
    ); 
    //console.log("product: " + product); 
} 

} 

Answer 1

Das ist, weil product nicht bis Ihr http Anruf beendet ist definiert ist. Sie können eine sichere Navigation Operator (?) benutzen, um Ihre Vorlage von immer aktuellen Fehler zu schützen, bis Ihre Daten kommen:

<table class="table-responsive"> 
<tr> 
<th>Description</th> 
<th>POS Description</th> 
<th>POS Price</th> 
<th>Stock On Hand</th> 
</tr> 
<tr> 
<td>{{product?.Description}}</td> 
<td>{{product?.POSDescription}}</td> 
<td>{{product?.POSPrice}}</td> 
<td>{{product?.StockOnHand}}</td> 
</tr> 
</table> 

Sie können auch NgIf Direktive verwenden, die Ihre Tabelle DOM nach http Anruf hinzufügen wird beendet:

<table *ngIf="product" class="table-responsive"> 
<tr> 
<th>Description</th> 
<th>POS Description</th> 
<th>POS Price</th> 
<th>Stock On Hand</th> 
</tr> 
<tr> 
<td>{{product.Description}}</td> 
<td>{{product.POSDescription}}</td> 
<td>{{product.POSPrice}}</td> 
<td>{{product.StockOnHand}}</td> 
</tr> 
</table> 

Answer 2

Sie *ngIf wie diese verwenden:

<table *ngIf="product" class="table-responsive"> 
<tr> 
    <th>Description</th> 
    <th>POS Description</th> 
    <th>POS Price</th> 
    <th>Stock On Hand</th> 
</tr> 
<tr> 
    <td>{{product.Description}}</td> 
    <td>{{product.POSDescription}}</td> 
    <td>{{product.POSPrice}}</td> 
    <td>{{product.StockOnHand}}</td> 
    </tr> 
</table>